Welcome,
I've got a grid , with grid row details like here:
https://demos.telerik.com/kendo-ui/grid/detailtemplate
also each grid ( "master" and "details") have a checkbox select column like here
https://demos.telerik.com/kendo-ui/grid/checkbox-selection
My grids have local javascript variable (array) which is bound, in
master with filter "ParentId == null" , in details "ParentId ==
e.data.Id".
My problem is:
when i right click on master grid - everything is ok.
when i right click on details grid - i get from e.target item from master grid ( i click second item in detail grid -> i get second item in master grid etc.)
Question:
What am I doing wrong? How to fix it?
Source:
function initMasterGrid() {
$("#modalGrid").kendoGrid({
dataSource: {
data: gridSource,
pageSize: 20,
filter: { field: "ParentId", operator: "eq", value: null },
schema: {
model: {
id: "Id"
}
}
},
height: 550,
scrollable: true,
resizable: true,
sortable: true,
filterable: true,
pageable: {
input: true,
numeric: false
},
change: onChange,
detailTemplate: kendo.template($("#detailTemplate").html()),
detailInit: detailInit,
dataBound: function () {
// this.expandRow(this.tbody.find("tr.k-master-row").first().html);
var tmpGrid = this;
tmpGrid.tbody.find("tr[role = 'row']").each(function () {
var id = tmpGrid.dataItem(this).Id;
if (expanded.hasOwnProperty(id) && expanded[id]) {
tmpGrid.expandRow(this);
}
});
},
persistSelection: true,
columns: [
{ selectable: true, width: "30px", headerAttributes: { style: "text-align:center" }, attributes: { style: "text-align:center" } },
{ field: "Id", title: "Id", width: "50px" },
{ field: "ParentId", title: "ParentId", width: "50px" },
{ field: "Name", title: "Nazwa", width: "100px" },
{ field: "Number", title: "Liczba", width: "200px" },
{ command: { text: "Usun", click: RemoveRow }, title: " ", width: "50px" }
],
detailExpand: function (e) {
var id = this.dataItem(e.masterRow).Id;
expanded[id] = true;
},
detailCollapse: function (e) {
var id = this.dataItem(e.masterRow).Id;
expanded[id] = false;
}
});
$("#nameField").kendoComboBox({
dataTextField: "Text",
filter: "contains",
minLength: 3,
dataSource: {
type: "json",
serverFiltering: true,
transport: {
read: "/api/entityname/getnames"
}
}
});
$("#quantityField").kendoNumericTextBox({
type: "number"
});
var menu = $("#menu"),
original = menu.clone(true);
original.find(".k-state-active").removeClass("k-state-active");
initMenu();
}
function initMenu() {
var menu = $("#menu").kendoContextMenu({
orientation: "vertical",
target: "#modalGrid",
// filter: ".k-detail-row tbody tr[role='row']",
filter: "tr[role='row']",
animation: {
open: { effects: "fadeIn" },
duration: 500
},
select: ContextMenuHandler,
open: AddMenuItems
});
};
function detailInit(e) {
var detailRow = e.detailRow;
detailRow.find(".tabstrip").kendoTabStrip({
animation: {
open: { effects: "fadeIn" }
}
});
detailRow.find(".groupInfo").kendoGrid({
dataSource: {
data: gridSource,
filter: { field: "ParentId", operator: "eq", value: e.data.Id },
schema: {
model: {
id: "Id"
}
}
},
detailTemplate: kendo.template($("#detailTemplate").html()),
detailInit: detailInit,
dataBound: function () {
var tmpGrid = this;
tmpGrid.tbody.find("tr[role = 'row']").each(function () {
var id = tmpGrid.dataItem(this).Id;
if (expanded.hasOwnProperty(id) && expanded[id]) {
tmpGrid.expandRow(this);
}
});
},
change: onChange,
persistSelection: true,
columns: [
{ selectable: true, width: "30px", headerAttributes: { style: "text-align:center" }, attributes: { style: "text-align:center" } },
{ field: "Id", title: "Id", width: "50px" },
{ field: "ParentId", title: "ParentId", width: "50px" },
{ field: "Name", title: "Nazwa", width: "100px" },
{ field: "Number", title: "Liczba", width: "100px" },
{ command: [{ text: "Usuń", click: RemoveRow }, { text: "Usuń z grupy", click: RemoveFromPackage }], title: " ", width: "60px", attributes: { style: "text-align:center" } }
],
detailExpand: function (e) {
var id = this.dataItem(e.masterRow).Id;
expanded[id] = true;
},
detailCollapse: function (e) {
var id = this.dataItem(e.masterRow).Id;
expanded[id] = false;
}
});
}
function AddMenuItems(e) {
console.log(item.Id);
// Add options to context Menu
initMenu()
}