如何解决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
希望这会有所帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。