Hiding Hierarchy cell

[Silpa]

 var kGrid = jGrid.kendoGrid({
            dataSource: {
                transport: {
                    read: {
                        url: Main.rootUrl(""),
                        dataType: "json"
                    }
                }
            },
            scrollable: false,
            columns: [
                            { field: "Field1", template: template1 },

 { field: "Field2", template: template2 },

{ field: "Field3", template: template3 },

            ],
            dataBound: function (e) {
              /* code */
            }
        }).getKendoGrid();

 

 

Inside a 'tr' of 'k-detail-row' this code is rendering table with empty 'td' of 'k-hierarchy-cell' class and 'td' of  'k-detail-cell' with above grid. How can I remove the 'td' element with k-hierarchy-cell class which is empty. 

[Viktor Tachev]

Hi Silpa,

In order to remove the cell when opening a detail Grid you can take advantage of the detailExpand event. Using jQuery remove the k-hierarchy-cell element and also adjust the colspan for the k-detail-cell in order for the detail Grid to be displayed correctly. The dojo below outlines the approach:

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

Regards,
Viktor Tachev
Progress Telerik

[Jens Anders]

An old thread, but for anyone else stumbling across this looking for a way to remove the hierarchy cell with nested tables, add a "> " to the selectors and make sure that we got a cell to remove.

 

detailExpand: function(e) {

    var cell = e.detailRow.find("> .k-hierarchy-cell");

    if(cell?.length) {

        var detailCell = e.detailRow.find("> .k-detail-cell");

        var colspan = parseInt(detailCell.attr("colspan")); 

        cell.remove();

        detailCell.attr("colspan", colspan+1);

    }

}