Kendo grid hierarchy detail indicator

[Anil]

Hi,

I have a grid where not all parent records have children data. Is there a way to hide the detail indicator for those that do not have children data? Thanks.

[Iliana Dyankova]

Hi Anil,

This scenario is not supported by Kendo UI Grid - keep in mind the child grids are populated after the master rows are expanded (so at the time the master grid is loaded, we are not aware whether to hide the expand icon or not). Hence as a possible workaround I can suggest using the child grids dataBound events (i.e. after they are populated) to check if there is any data and then remove the css class from the .k-master-row>.k-hierarchy-cell>a elements.

Regards,
Iliana Nikolova
Telerik

[EVANGELIA]

Hi, 
I am using a Hierarchical Kendo grid and I want also to hide the child indicator, based on  boolean variable I carry in my model e.g HasChildren. Is something like that possible?

Thanks in advance,
Lina  

[Iliana Dyankova]

Hi Lina,

For this requirement I would suggest to attach a handler to the master grid dataBound event, loop through all rows and hide the hierarchy detail indicator depending on the current row dataItem. As an example: 

$("#masterGrid").kendoGrid({
  //....
  dataBound: function(e) {
      var grid = this;
      grid.tbody.find('>tr').each(function(){
        var dataItem = grid.dataItem(this);
        if(!dataItem.hasChildren) {
           $(this).find(".k-hierarchy-cell a").removeClass("k-icon");
        }
      })
  }
});

Regards,
Iliana Nikolova
Telerik

 

 

[Stefan Timm]

Hi, the better approach is to remove all the things. When not you have some rest of this function on your row. The user can open the sub again. So do this way:

$("#masterGrid").kendoGrid({

  //....

  dataBound: function(e) {

      var grid = this;

      grid.tbody.find('>tr').each(function(){

        var dataItem = grid.dataItem(this);

        if(!dataItem.hasChildren) {

           $(this).find(".k-hierarchy-cell a").removeClass("k-icon");
           $(this).find(".k-hierarchy-cell a").removeClass("k-plus");
           $(this).find(".k-hierarchy-cell a").removeAttr("href");
        }

      })

  }

});