telerik：RadGrid：如何根据列控件触发的客户端事件获取行索引

问题描述

有一个4列网格，在第二列中有一个下拉列表，其客户端更改事件被关联以触发基于所选值的某些操作。基本上，第3列中的控件将根据ddl值以及是否选中最后一列中的复选框进行操作。

RadGrid

  <telerik:RadGrid ID="theGrid" runat="server">
        <MasterTableView ClientDataKeyNames="ProductId" EditMode="InPlace">
            <Columns>
               <telerik:GridBoundColumn DataField="ProductName" HeaderStyle-Width="120px" HeaderText="Product Name" UniqueName="ProductName" ReadOnly="true"></telerik:GridBoundColumn>


                <telerik:GridTemplateColumn UniqueName="ProductServices" HeaderText="QX Services">
                   <ItemTemplate>
                          <telerik:RadDropDownList ID="ddlProductServices" runat="server"  OnClientItemSelected="productServicesItemSelected"></telerik:RadDropDownList>
                    </ItemTemplate>
                 </telerik:GridTemplateColumn>

               <telerik:GridTemplateColumn UniqueName="IncludePublicRecordData" HeaderText="Include Public Record Data">
                    <ItemTemplate>
                           <asp:CheckBox ID="IncludePublicRecordData" runat="server" Enabled="False" AutoPostBack="false"></asp:CheckBox>
                    </ItemTemplate>
              </telerik:GridTemplateColumn>

            <telerik:GridCheckBoxColumn DataField="EnablePublicRecordData" UniqueName="hdnEligiblePublicRecordData" ReadOnly="True" HeaderText="Eligible Public Record Data">
          </telerik:GridCheckBoxColumn>

         </Columns>
      </MasterTableView>
      <ClientSettings AllowKeyboardNavigation="false" EnableRowHoverStyle="True">
         <Selecting AllowRowSelect="false" EnableDragToSelectRows="False" />
     </ClientSettings>
 </telerik:RadGrid>

可操作的客户端事件

我需要知道当前在哪一行起作用。目前，这种奇怪的解决方案有效，但只能这样做是因为表中只有1行。

我要尝试的是旋转扔行，并将“发送者”对象的ID与其中一个单元格之一匹配，并使用循环索引。但是，这看起来是如此糟糕且前后不一致（由于对象的嵌套）。我确信telerik有一个更简单，更干净的方法来完成此任务，因此我向SO社区表示感谢。

  function productServicesItemSelected(sender,eventArgs) {

        try {
            const str = sender._uniqueId; 
          
            let parent = sender.get_parent();

            const item = eventArgs.get_item();
            const selectedValue = item.get_value() || "";

            console.log("You selected " + item.get_text() + "; with value " + item.get_value());

            let itemParent = item._parent;

            let theGrid = $find("<%=ProductServicesGrid.ClientID %>");
            if (theGrid) {
                let masterTable = theGrid.get_masterTableView();
                let rows = masterTable.get_dataItems();
                let rowIdx = 0;

                if (rows.length > 1) {
                    console.log("...finding rowIdx:");
                    
                    for (let i = 0; i < rows.length; i++) {
                        let row = rows[i];
                        let cellz = row._element.cells;
                        if (cellz) {
                            for (var j = 0; j < cellz.length; j++) {
                                var celll = cellz[j];
                                // match item uniqueId with that of each cell
                                console.log(celll);
                            }
                        }
                    }
                }

                let currentRow = rows[rowIdx];
                let cells = currentRow._element.cells;
                // 
                let eligibleCheckbox = cells[3].firstElementChild.childNodes[0];
                let includeCheckbox = cells[2].firstElementChild;

                if (selectedValue === "QEWComp" || selectedValue === "none") {
  
                    // disable 
                    $(includeCheckbox).attr('disabled',true);
                    // uncheck 
                     $(includeCheckbox).prop("checked",false);

                 } else {
                     if (eligibleCheckbox.checked) {
                         $(includeCheckbox).attr('disabled',false);
                     } else {
                         $(includeCheckbox).attr('disabled',true);
                     }
                }
      }

解决方法

我做类似事情的方法是传入 Container.ItemIndex

OnClientItemSelected='<%# string.Format("productServicesItemSelected(this,{0}); return false;",Container.ItemIndex) %>'

JavaScript 函数看起来像

function productServicesItemSelected(sender,itemIndex) { }

要获取下拉列表所在的选定行，您可以使用：

var theGrid = $find("<%=ProductServicesGrid.ClientID %>");
var masterTableView = theGrid.get_masterTableView();
// clear any previously selected rows
theGrid.clearSelectedItems();
// select the current row by index
masterTableView.selectItem(itemIndex);
var selectedItems = masterTableView.get_selectedItems();
 
if (selectedItems.length > 0) {}

这将为您提供选定的行，您可以使用 selectedItems[0] 之外的函数来获取您在网格上定义的数据键值，例如 productID

希望这会有所帮助。