hierarchical grid expand detail row

3 posts, 1 answers
  1. Muhammad
    Muhammad avatar
    12 posts
    Member since:
    Aug 2015

    Posted 23 Nov 2017 Link to this post

    In hierarchical grid i want to expand detail row on mouse click any where on a master row instead of expand/collapse icon. may i know how i can do that?
  2. Answer
    Preslav
    Admin
    Preslav avatar
    516 posts

    Posted 24 Nov 2017 Link to this post

    Hi Muhammad,

    To achieve the desired behavior use the expandRow and collapseRow methods of the Grid.
    For example, in the dataBound event handler of the Grid attach click event handler to the master rows:

    dataBound: function(e) {
      var grid = e.sender;
       
      grid.tbody.find("tr.k-master-row").click(function(e){                           
        var target = $(e.target);                           
        if((target.hasClass("k-i-expand"))||(target.hasClass("k-i-collapse"))){
          return;
        }         
         
        var row = target.closest("tr.k-master-row");
        var icon = row.find(".k-i-expand");
     
        if(icon.length){
          grid.expandRow(row);
        }else{
          grid.collapseRow(row);
        }   
      })
         
    },

    For a runnable example, check this 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.
  3. Muhammad
    Muhammad avatar
    12 posts
    Member since:
    Aug 2015

    Posted 24 Nov 2017 in reply to Preslav Link to this post

    Thanks
Back to Top