This is a migrated thread and some comments may be shown as answers.
Hide expand/collapse column and use row click to expand/collapse row detail instead
3 Answers 363 Views
This is a migrated thread and some comments may be shown as answers.
Byang
Top achievements
Rank 1
Byang asked on 26 Feb 2016, 12:45 PM

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

 

3 Answers, 1 is accepted

Sort by
0
Patrick
Telerik team
answered on 26 Feb 2016, 07:13 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Andrea
Top achievements
Rank 2
answered on 01 Jul 2018, 03:06 PM

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

 

0
Preslav
Telerik team
answered on 03 Jul 2018, 10:16 AM
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:
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.
Tags
Grid
Asked by
Byang
Top achievements
Rank 1
Answers by
Patrick
Telerik team
Andrea
Top achievements
Rank 2
Preslav
Telerik team
Share this question
or