hierarchical grid expand detail row

[Muhammad]

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?

[Preslav]

Hi Muhammad,

To achieve the desired behavior use the expandRow and collapseRow methods of the Grid.

• https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-expandRow
• https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-collapseRow
  

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:

• http://dojo.telerik.com/AluWut

Regards,
Preslav
Progress Telerik

[Muhammad]

Thanks

[Richard]

That works, unless there is an edit button in the row, like this:

http://dojo.telerik.com/usEwIbEF

When you click on the edit button, the page crashes.

How to solve this?

 

[Georgi Denchev]

Hi, Richard,

Thank you for the provided sample.

The crash isn't related to the above approach, it is a bug in the older versions of Kendo UI. You can exclude the command cell from the logic like so:

                if(target.is(".k-command-cell *")) {
                  return;
                }

However, the crash will still occur because of the bug. You can use a custom command and prevent the default behavior of the <a> element, but I'd recommend that you upgrade the library instead:

              {
                command: [{
                  name: "edit",
                  click: function(e) {
                    e.preventDefault();
                    var tr = $(e.target).closest("tr");
                    var data = this.dataItem(tr);
                    
                    $("#grid").data("kendoGrid").editRow(tr);
                  }
                }]
              }

Dojo

http://dojo.telerik.com/@gdenchev/eTomuxaH 

Best Regards,

Georgi