How to collapse kendo grid to headers?

0
votes

I have strange requirement. I was asked to collapse all data rows of a Kendo grid to its header. I know to collapse to groups. But this seems strong suggestions to achieve.

Below is the proposed Kendo Grid, with an arrow in the header. Once click on the arrow, all the rows should collapse to header. By default this should be in collapsed state.

Kendo Grid

Please throw some lights on me to solve this.

1
jquerykendo-uikendo-grid
So if you had 3 columns in your grid, each with a arrow, you want to be able to possibly only show 1 column's data? That seems pretty far out there. I've never seen any examples of the grid doing that. Really this is what the Groups are for. This Example shows how to filter out columns. Click on the Order ID column filter and there will be a Columns option where you can show/hide certain columns. - ShawnOrr

1 Answers

2
votes

Something like this?

http://dojo.telerik.com/@Stephen/iJAve

The key is the hiding/showing of the k-grid-content div and then adjusting the height of the grid to compensate so that the borders don't remain at the original, uncollapsed location.

Now, this is a simple grid without paging, grouping, virtual scrolling, frozen columns, etc.
If you have those elements, then the divs that need to be hidden may change based on the different element layout that kendo uses to provide the functionality.