telerik：RadGrid：如何根據列控件觸發的客戶端事件獲取行索引

Question

有一個 4 列網格，在第二列中有一個下拉列表，其客戶端更改事件被連接以根據所選值觸發一些操作。 基本上，第 3 列中的控件將根據 ddl 值以及是否選中最后一列中的復選框進行操作。

輻射網格

  <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 行。

我要嘗試的是旋轉拋出行並將“發件人”object 的 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);
                     }
                }
      }

Answer 1

我做類似事情的方法是傳入 Container.ItemIndex

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

JavaScript function 看起來像

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

希望這有所幫助。