Hide expand/collapse column and use row click to expand/collapse row detail instead

[Byang]

Hiya,

I was trying to hide the expand/collapse column and use the row click to expand/collapse the row detail instead. I was able to implement each individually but when I combine them the row click is no longer working.

I use the following to hide the expand/collapse column in the DataBound event:

$(".k-hierarchy-cell").remove();
$(".k-hierarchy-col").remove();

And something like the following to implement the row click to expand the row detail:

element.on('click','tr',function(){
   $(element).data().kendoGrid.expandRow($(this));
})

Did I miss anything?

 

Cheers,

Byang

 

[Patrick | Technical Support Engineer, Senior]

Hi Ruby Jean,

Please take a look at this example illustrating one way to expand and collapse rows in a hierarchical Kendo Grid by row clicking.   

First, hide the classes "k-hierarchy-cell" and "k-hierarchy-col" during the databound event.  Then, create some custom jQuery to handle the click event on the rows. 

More details about this approach can be found on this post in our forums.

Hope this helps!

Regards,
Patrick
Telerik

 

 

[Andrea]

Seems that this doesn't work well with grouping enabled, there are cells width problems:

http://dojo.telerik.com/aXUmeZAY

Is there a way to solve this behavior?

 

Thank you

 

[Preslav]

Hello Andrea,

If anyone from the community encounters the same, I am pasting my answer from your support ticket on the same topic:

Generally speaking, hiding an element is similar to removing it from the DOM tree. Thus, hiding a cell in an HTML table sometimes leads to undesired side effects.

What I would suggest is changing the width of the relevant column to 1 pixel. For example:

dataBound: function() {
  grid.find(".k-hierarchy-col").css("width", "1px"); //get rid of detail icon
  grid.find(".k-hierarchy-cell").css("visibility", "hidden");
},

Please, find the modified Dojo here:

• http://dojo.telerik.com/aXUmeZAY/5

Regards,
Preslav
Progress Telerik