Kendo Grid with collapsible rows

[Ismael]

Hello Telerik Team,

I have a requirement to develop a Grid with collapsible rowes (image attached), I wonder If Kendo Grid supports this behavior or something similar at least,

It is possible to do using Kendo grid or to have a similar behavior at least?

I already reviewed Grid / Aggregates and looks very similar but I'd like to have columns with values in the parent row,

Notice my requirement does not  needs to have pagination,

Thanks in advance!

[Vladimir Iliev]

Hi Ismael,

From the provided screenshot it's not clear for me what is the exact data set (what is the relation between the parent and child rows) that you have, however it seems that Grid with grouping and aggregates for the columns would do the job if the data you use is flat. In case the data is hierarchical (e.g. the parent and child rows are different tables with relation), than the best way to go will be Grid hierarchy (demo here).

Regards,
Vladimir Iliev
Telerik by Progress

[Ismael]

Thanks for answer Vladimir,

In this case each column header (show in darkness gray) shows the total amount of the column, when you open the row you can see each concept detail, every parent row represents a row and first column is the header/title for each concept

[Vladimir Iliev]

Hi Ismael,

From the last clarification it seems that you need to use Grid with grouping enabled (the first suggestion from my last reply). You can also customize the "groupHeaderTemplate" option of the column to show the desired aggregates. 

Regards,
Vladimir Iliev
Telerik by Progress

[Abhilasha]

Hi Ismael,

I have some what the same requirement as yours. Did you find any solution for grouping the plain data to show the details. If yes, please let me tknow the solution.

Thanks in Advance !!

Regards,

Abhi

[Alex Hajigeorgieva]

Hello ,

The desired functionality can be achieved with the groupHeaderTemplate and the following steps:

- decide on the aggregates and the field to group by
- create the template to contain the correct number of <td> elements to match the table structure

The grouping row which is generated by the grid contains a <td> with colspan which matches the number of columns, so we need to change that.

- add a handler to the dataBound event of the Kendo UI Grid, select the first <td> for each ".k-grouping-row" and set the colspan attribute to 1.

dataBound: function(){
  var groupingRows = $(this.table).find(".k-grouping-row");
  groupingRows.each(function(idx,row){
    $(row).find("td:first").attr("colspan", 1);
    $(row).next("p").remove();
  });
},

Here is a runnable demo which shows this approach:

http://dojo.telerik.com/@bubblemaster/eXaBot/2

Regards,
Alex Hajigeorgieva
Progress Telerik