Context Menu In hierarchy grid

6 posts, 0 answers
  1. Maciej
    Maciej avatar
    7 posts
    Member since:
    Nov 2017

    Posted 27 Feb Link to this post

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

  2. Preslav
    Admin
    Preslav avatar
    455 posts

    Posted 28 Feb Link to this post

    Hello Maciej,

    Based on the provided code and description I created this test page:
    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Maciej
    Maciej avatar
    7 posts
    Member since:
    Nov 2017

    Posted 01 Mar in reply to Preslav Link to this post

    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?

  4. Maciej
    Maciej avatar
    7 posts
    Member since:
    Nov 2017

    Posted 01 Mar in reply to Maciej Link to this post

    Maciej said:

    i get the parent row instead of current clicked row.

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

  5. Preslav
    Admin
    Preslav avatar
    455 posts

    Posted 01 Mar Link to this post

    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:

    open: function(e){
      var grid = $(e.target.closest(".k-grid")).data("kendoGrid");
      var dataItem = grid.dataItem(e.target);
       
      console.log(dataItem);           
    }

    For a runnable example, check the modified Dojo:

    Regards,
    Preslav
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. Maciej
    Maciej avatar
    7 posts
    Member since:
    Nov 2017

    Posted 02 Mar in reply to Preslav Link to this post

    Thank you a lot! It helps
Back to Top