Kendo grid hierarchy detail indicator

5 posts, 0 answers
  1. Anil
    Anil avatar
    2 posts
    Member since:
    Jul 2012

    Posted 31 Jan 2014 Link to this post

    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.
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 04 Feb 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. EVANGELIA
    EVANGELIA avatar
    1 posts
    Member since:
    Jun 2014

    Posted 01 Jul 2014 in reply to Iliana Nikolova Link to this post

    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  
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 03 Jul 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Stefan Timm
    Stefan Timm avatar
    6 posts
    Member since:
    May 2007

    Posted 26 Jan in reply to Iliana Nikolova Link to this post

    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");
            }
     
          })
     
      }
     
    });

Back to Top
Kendo UI is VS 2017 Ready