在我的 detailInit 网格中向我的网格添加下拉列表时,我遇到了一个问题。当我选择一行时,下拉列表在那里,但是当我选择另一行时,下拉列表不会出现。
但是,如果我选择第三行,则会出现下拉列表,它们将出现在第二行和第一行中,但不会出现在第四行中。
为什么会发生这种情况以及如何修复它,以便无论我选择哪一行,所有行都将具有下拉列表?
var dropdownData = [{
"CatalogID": 1,
"NameVersion": "Catalog1"
},
{
"CatalogID": 2,
"NameVersion": "Catalog2"
},
{
"CatalogID": 3,
"NameVersion": "Catalog3"
},
{
"CatalogID": 4,
"NameVersion": "Catalog4"
},
];
$(document).ready(function() {
//#region Data
var data2 = [{
"RoomID": 1,
"RoomName": "Room 1",
"Areas": [{
"id": 1,
"AreaName": "Area 1"
}, {
"id": 10,
"AreaName": "Area 10"
}]
},
{
"RoomID": 2,
"RoomName": "Room 2",
"Areas": [{
"id": 2,
"AreaName": "Area 2"
}, {
"id": 20,
"AreaName": "Area 20"
}]
},
{
"RoomID": 3,
"RoomName": "Room 3",
"Areas": [{
"id": 3,
"AreaName": "Area 3"
}, {
"id": 30,
"AreaName": "Area 30"
}, {
"id": 35,
"AreaName": "Area 35"
}]
},
{
"RoomID": 4,
"RoomName": "Room 4",
"Areas": [{
"id": 4,
"AreaName": "Area 4"
}, {
"id": 40,
"AreaName": "Area 40"
}]
}
];
//#endregion
ShowTabEditor(data2);
});
function ShowTabEditor(data) {
$('#TabEditor').kendoGrid({
dataSource: {
data: data
},
schema: {
model: "RoomID",
fields: {
RoomID: {
editable: false,
hidden: true
},
RoomName: {
editable: false,
type: "string",
hidden: false
},
AreaCount: {
editable: false,
type: "number",
hidden: false
}
}
},
columns: [{
field: "RoomID",
title: "RoomID",
hidden: true
},
{
field: "RoomName",
title: "RoomName",
hidden: false
},
{
field: "AreaCount",
title: "AreaCount",
hidden: false
}
],
selectable: "row",
//change: onTabEditorRowSelect,
//detailTemplate: kendo.template($("#TabAreaTemplate").html()),
detailInit: TabEditorDetailInit,
detailExpand: function(e) {
this.select(e.detailRow.prev());
this.collapseRow(this.tbody.find('> tr.k-master-row').not(e.masterRow));
}
}).data("kendoGrid");
}
function TabEditorDetailInit(e) {
//var masterRow = e.masterRow;
//var roomID = e.data.RoomID;
$("<div id='EditAreaGrid' />").appendTo(e.detailCell).kendoGrid({
scrollable: true,
sortable: true,
selectable: "row",
filterable: false,
toolbar: kendo.template($("#EditAreaGridToolbarTemplate").html()),
columns: [{
title: "id",
field: "id",
hidden: true
}, {
field: "AreaName",
title: "Area Name",
width: "20px",
template: "<div >#=AreaName #</div>"
}, {
title: "Catalog",
field: "Catalog",
template: "<input class='edit-area-catalog-dropdown' type='text' />",
width: "40px",
editable: false
}],
editable: {
mode: "incell",
confirmation: false
},
dataSource: {
data: e.data.Areas,
schema: {
model: {
fields: {
id: {
nullable: true
},
AreaName: {
nullable: true,
editable: true
},
Catalog: {
editable: false
}
}
}
}
},
dataBound: function(e) {
abindCatalogDropDownInCellProcess();
}
});
}
function abindCatalogDropDownInCellProcess() {
$("#EditAreaGrid").data("kendoGrid").tbody.find("td input.edit-area-catalog-dropdown").each(function() {
$(this).kendoDropDownList({
dataTextField: "NameVersion",
dataValueField: "CatalogID",
optionLabel: "Select Catalog...",
dataSource: {
transport: {
read: function(options) {
if (dropdownData.length > 0) {
options.success(dropdownData);
return;
}
options.success(dropdownData);
}
}
},
select: function(e) {
var grid = $("#EditAreaGrid").data("kendoGrid");
var dataItem = grid.dataItem(grid.select());
var drpDataItem = this.dataItem(e.item);
}
});
});
}
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
<script type="text/x-kendo-template" id="EditAreaGridToolbarTemplate">
<button class="btn btn-sm btn-primary" id="btnAddNewArea"><i class="fa fa-plus"></i></button>
<button id="btnDeleteArea" class="btn btn-sm btn-danger"><i class="fa fa-remove"></i></button>
</script>
<div id="TabEditor"></div>
您有多个具有相同 ID 的 DOM 元素,对于您创建具有相同 ID 的网格的每个细节单元格,因此在 dataBound 事件中您无法控制您选择的网格。
我认为,您应该将 detailCell 作为参数传递给 'abindCatalogDropDownInCellProcess' 函数以查找相应的输入,如下所示:
dataBound: function(w) {
abindCatalogDropDownInCellProcess(e.detailCell);
}
...
function abindCatalogDropDownInCellProcess(cell) {
cell.find("td input.edit-area-catalog-dropdown").each(function(){})
}
工作示例。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句