选中ultrawebgrid切换tab在文本框得到选中值

Before You Begin

在你开始之前

Sometimes it's necessary to process some logic on the client side through JavaScript instead of causing a full-page postback. The WebTab™ control has a couple of client-side events that will help you achieve such functionality.

有时客户端需要通过javascript来处理一些逻辑以此取代整个页面的pastback. WebTab控件拥有数个客户端事件来帮助你构建此类功能

What You Will Accomplish

你将如何去实现

Create a WebTab with two Tab objects, and pass information from the first tab to the second tab using WebTab's BeforeSelectedTabChange client-side event.

创建一个拥有两个Tab对象的WebTab,使用BeforeSelectedTabChange客户端事件把第一个tab的信息传递到第二个tab中

Follow these Steps

遵循下面的步骤

1. Create a new Microsoft® Visual Studio® 2005 ASP.NET Web application. 创建一个新的Microsoft® Visual Studio® 2005 ASP.NET web程序
2. From the toolbox, drag the UltraWebTab control to the Web page.从控件栏里拖放一个UltraWebTab到页面上
3. Add two tabs using the WebTab Designer. For more information on how to add tabs through the WebTab Designer, see Using the WebTab Designer.使用 WebTab 设计器添加两个tabs.关于WebTab 设计器如何添加tabs,请参阅Using the WebTab Designer
4. 1. For the first tab, set the Text and Key properties to Tab1.

在第一个tab中,设置其text和key属性

3. 2. For the second tab, set the Text and Key properties to Tab2.

在第二个tab中, 设置其text和key属性

4. If the WebTab Designer is still open, click Apply, then OK to close it.

如果WebTab设计器还在打开状态,点击apply,然后点击ok关掉设计器

5. Add controls to each WebTab.

为每个WebTab添加控件

Note: In Visual Studio 2005, editable regions replaced design-time templates. For more information, see Using Editable Designer Regions in WebTab.

注意:在Visual Studio 2005中,可编辑区域取代了设计时模板.更多提示参看Using Editable Designer Regions in WebTab

5. 1. Add the UltraWebGrid control to Tab1's editable region and bind it to some data. For more information on how to bind WebGrid to data, see the Related Topics section at the end of this topic.

添加UltraWebGrid控件到Tab1的可编辑区,然后给它绑定一些数据.

5. 2. Add controls to Tab2.
   3. • From the Toolbox, drag two WebTextEdit™, WebCurrencyEdit™, and WebNumericEdit™ controls to your Web page.

从控件栏拖放两个WebTextEdit,一个WebCurrencyEdit和一个WebNumericEdit到你的页面

5. 2. • Enter some text before each editor similar to the screen shot below.

在设计你的每个editor与下方屏幕截图类似之前,填写一些文字

6. Add WebTab's BeforeSelectedTabChange client-side event.

添加WebTab的BeforeSelectedTabChange客户端事件

6. 1. In WebTab's Properties window, expand the ClientSideEvents property.

在WebTab的属性窗口中,展开ClientSideEvents属性

6. 2. Click the second column on BeforeSelectedTabChanged, click on the dropdown arrow, and select Add Handler…. The ClientSideEventGenerator dialog box opens.

点击BeforeSelectedTabChanged的第二列,点击向下箭头,选择添加Handler..之后ClientSideEventGenerator对话框打开

Note: The generated client-side event names usually follow a "controlname_client-side event" format by default.

注意:产生的默认客户端事件名称通常遵循”controlname_client-side event”的格式

6. 3. Leave the generated client-side event handler name, and click OK.

要离开client-side event handler name,点击OK

7. Add the WebGrid's InitializeLayoutHandler client-side event.

添加WebGrid的InitializeLayoutHandler客户端事件

7. 1. In WebGrid's Properties window, expand the DisplayLayout, then expand the ClientSideEvents property.

在WebGrid属性窗口,展开DisplayLayout,展开ClientSideEvents属性

7. 2. Click the InitializeLayoutHandler property. Click the drop-down arrow, and select Add Handler…. The ClientSideEventGenerator dialog box opens.

点击InitializeLayoutHandler属性,点击向下箭头,选择Add Handler…之后, ClientSideEventGenerator对话框打开

Note: The generated client-side event names usually follow a "controlname_client-side event" format by default.

注意:产生的默认客户端事件名称通常遵循”controlname_client-side event”的格式

7. 3. Leave the generated client-side event handler name, and click OK.

要离开client-side event handler name,点击OK

8. In the Web page's Source view, add the example code below. This code populates the editors in the second tab with the data from the selected row in the WebGrid located in the first tab. If there is no selected row, a message is displayed to the end user, and the event is cancelled.

在页面源视图里,添加下方的示例代码,代码把第一个tab中的WebGrid选中行里的数据显示到第二个tab中编辑框中

In JavaScript:

// Create a global variable to hold grid object
var _grid = null;
function UltraWebTab1_BeforeSelectedTabChange(oWebTab, oTab, oEvent){
        // Set a variable for the selected row
  var selectedRow = null;              
  selectedRow = _grid.getActiveRow();
 
  // If there is no selected row, display a message and cancel event
  if (selectedRow == null)
  {
      alert("Select a Customer");
      oEvent.cancel=true;
  }
  else
  {
    // If the first tab is being activated from second tab, exit the function
    if (oTab.getIndex() == 0)
    {
          return true;      
    }   
             
          // Retrieve edits in second tab
          var webTextEdit1 =
              igedit_getById(oTab.findControl("WebTextEdit1").id);     
          var webTextEdit2 =     
              igedit_getById(oTab.findControl("WebTextEdit2").id);
          var webCurrencyEdit1 =     
              igedit_getById(oTab.findControl("WebCurrencyEdit1").id);
          var webNumericEdit1 =
              igedit_getById(oTab.findControl("WebNumericEdit1").id);
     
          // Set the values for each editor
          webTextEdit1.setValue(selectedRow.getCell(0).getValue().toString());           
          webTextEdit2.setValue(selectedRow.getCell(1).getValue().toString());           
          webCurrencyEdit1.setValue(selectedRow.getCell(2).getValue());
          webNumericEdit1.setValue(selectedRow.getCell(3).getValue());    

  }
}
// Place WebGrid object in global variable
function UltraWebGrid1_InitializeLayoutHandler(gridName){
    _grid = igtbl_getGridById(gridName);
 
}

9. Run the Web application. Select a row in the WebGrid control.

运行web程序,选中WebGrid控件的一行

10. Click the Tab2 tab. Notice how each text box is populated with the appropriate column value.

点击tab2的tab,注意到每个文本框已经填充了相应的值