accordion behavior in hierarchical grid

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

    Posted 23 Nov 2017 Link to this post

    I have a hierarchical grid in which i want to have only one row expanded at a time.  
  2. Answer
    Preslav
    Admin
    Preslav avatar
    516 posts

    Posted 24 Nov 2017 Link to this post

    Hi Muhammad,

    Achieving the desired behavior will require the usage of the detailExpand event and the collapseRow method.
    For example, in the detailExpand event handler, get all the master rows without the one that invoked the event(e.masterRow). Then, use the collapseRow for every master row. The code could look like:

    detailExpand: function(e) {
      var grid = e.sender;
      var rows = grid.element.find(".k-master-row").not(e.masterRow);
       
      rows.each(function(e){
        grid.collapseRow(this);
      });
    },

    For a runnable example, check my testing 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