I am running into an issue when adding a dropdownlist to my grid in my detailInit grid. When I select a row, the dropdownlists are in there, but when I select another row, then the dropdownlist's don't appear.
However, if I select the 3rd row, I get the dropdownlists appearing and they will appear in the 2nd and 1rst row, but not the fourth.
Why is this happening and how do I fix it so that regardless which row I select, that all the rows will have the dropdownlists?
Below is my testing code
<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>
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);
}
});
});
}