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()
}

Hello Maciej,

Based on the provided code and description I created this test page:

• https://dojo.telerik.com/oVEtiyUt

It seems that, on my side, the e.target returns the correct row.

Please, check the above Dojo and let me know what I am doing wrong.


Regards,
Preslav
Progress Telerik

Yes u are right my mistake, but when i try to get the datItem
var dataItem = grid.dataItem(e.target);

i get the parent row instead of current clicked row.
What do i wrong?

Maciej said:

i get the parent row instead of current clicked row.

Its not even parent its a "random" row from Master Grid

Hello Maciej,

Based on your last post, I assume that you are getting the dataItem from the master Grid. Please correct me if I am wrong.

The correct approach should be using the dataItem method of the Grid relevant to the row. For example:


For a runnable example, check the modified Dojo:

• https://dojo.telerik.com/oVEtiyUt/6

Regards,
Preslav
Progress Telerik

Thank you a lot! It helps