Hide the Expand/Collapse column of a Detail Grid

[Landon]

Hi,

I currently have a Grid nested within another Grid in a Detail Template. As I will be controlling the Expand/Collapse functions remotely, I have no reason for this column to be displayed. In addition, my app will be used on a tablet 50% of the time, so the extra 20-35 pixels of real-estate would be very helpful.

Is it possible to hide the expand/collapse column added to Detail Grids?

Thanks,
Landon

[Iliana Dyankova]

Hi Landon,

I am afraid what you would like to achieve is not supported out-of-the-box in Kendo UI Grid. As a possible workaround I can suggest you in the Grid's dataBound event to change the DOM structure of the hierarchy row via jQuery. For example: 

$("#grid").kendoGrid({
  //....
  dataBound: function() {
    $(".k-hierarchy-col").remove();
    $(".k-hierarchy-cell").remove();
  }
});

Regards,

Iliana Nikolova
Telerik

[Sashi]

Here is what worked for me just in case anyone is trying to do this. Put this in the databound function of the master grid

// In mastergrid
    .Events(e => e.DataBound("mastergrid_databound"))

//This function is called on databind in the  mastergrid

function mastergrid_databound(e) {

var dataSource = this.dataSource;
        this.element.find('tr.k-master-row').each(function () {
            var row = $(this);
            var data = dataSource.getByUid(row.data('uid'));
            // Answers is the collection which holds the detail rows
            if (data.Answers.length === 0) {
              
                row.find('.k-hierarchy-cell a').css({ opacity: 0.3, cursor: 'default' }).click(function (e) { e.stopImmediatePropagation(); return false; });
            }
        });

}

Hope this helps.