This is a migrated thread and some comments may be shown as answers.

Kendo Grid with collapsible rows

5 Answers 253 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ismael
Top achievements
Rank 1
Ismael asked on 16 Nov 2016, 11:33 PM

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

Sort by
0
Vladimir Iliev
Telerik team
answered on 18 Nov 2016, 08:05 AM
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
Kendo UI is ready for Visual Studio 2017 RC! Learn more.
0
Ismael
Top achievements
Rank 1
answered on 23 Nov 2016, 03:32 PM

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

0
Vladimir Iliev
Telerik team
answered on 24 Nov 2016, 08:10 AM
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
Kendo UI is ready for Visual Studio 2017 RC! Learn more.
0
Abhilasha
Top achievements
Rank 1
answered on 04 Jun 2017, 09:14 AM

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

0
Alex Hajigeorgieva
Telerik team
answered on 07 Jun 2017, 06:52 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
Tags
Grid
Asked by
Ismael
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Ismael
Top achievements
Rank 1
Abhilasha
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or