Kendo Grid with collapsible rows

6 posts, 0 answers
  1. Ismael
    Ismael avatar
    10 posts
    Member since:
    Nov 2014

    Posted 16 Nov 2016 Link to this post

    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!

  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2200 posts

    Posted 18 Nov 2016 Link to this post

    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.
  3. Ismael
    Ismael avatar
    10 posts
    Member since:
    Nov 2014

    Posted 23 Nov 2016 in reply to Vladimir Iliev Link to this post

    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

  4. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2200 posts

    Posted 24 Nov 2016 Link to this post

    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.
  5. Abhilasha
    Abhilasha avatar
    1 posts
    Member since:
    Jun 2017

    Posted 04 Jun 2017 in reply to Ismael Link to this post

    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

  6. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    995 posts

    Posted 07 Jun 2017 Link to this post

    Hello Abhilasha,

    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 visualization (charts) and form elements.
Back to Top