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!
5 Answers, 1 is accepted
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

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
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

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
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