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
0
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
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
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
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:
Please, find the modified Dojo here: Regards,
Preslav
Progress Telerik
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.