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

Kendo grid - create new sub row based on condition

2 Answers 365 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Kirubakaran
Top achievements
Rank 1
Kirubakaran asked on 06 Apr 2020, 08:29 AM

the below code is use to generate kendoGrid. i want to create child row (no header) with value of "Comments" field, when "Comments" not empty. How can i achieve this. expecting your help.

 

<div id="grid"></div> <script> $("#grid").kendoGrid({ columns: [ { field: "productName" }, { field: "category" }, { field: "status" }, { field: "Comments"} ], dataSource: { data: [ { productName: "Tea", category: "Beverages", status: "Open", "Comments": "" }, { productName: "Coffee", category: "Beverages", status: "Open", "Comments": "comment1" }, { productName: "Ham", category: "Food", status: "Open", "Comments": "" }, { productName: "Bread", category: "Food", status: "Open", "Comments": "" }, { productName: "Hammer", category: "Hardware", status: "Closed", "Comments": "Comment test" }, { productName: "Screw", category: "Hardware", status: "Open", "Comments": "commenting testing" } ], group: { field: "category" } }, }); var grid = $("#grid").data("kendoGrid"); var dataView = grid.dataSource.view(); </script>

2 Answers, 1 is accepted

Sort by
0
Accepted
Alex Hajigeorgieva
Telerik team
answered on 07 Apr 2020, 02:43 PM

Hi, Kirubakaran,

Thank you very much for the provided snippet.

What you are referring to can be achieved via a detailTemplate or by using the detailInit function handler.

    detailTemplate: "<div class='comments'>",
    detailInit: function(e){
      e.detailRow.find(".comments").html("<p>" + e.data.Comments+ "</p>");
    },

In addition to that, if you wish to show the expand arrow only for rows that have Comments then you will need to remove the ones that do not in the dataBound handler as they are generated for each row.

dataBound:function(e){
      var grid = this;
      var rows = grid.items();
      $.each(rows, function(i,row){
        var dataItem = grid.dataItem(row);
        if(!dataItem.Comments){
          $(row).find(".k-hierarchy-cell").empty();
        }
      })
    },

Here is a sample Dojo to illustrate:

https://dojo.telerik.com/@bubblemaster/uHEjAvoT

Regards,
Alex Hajigeorgieva
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Kirubakaran
Top achievements
Rank 1
answered on 08 Apr 2020, 06:20 AM
Wow Alex Hajigeorgieva, This is what i expected and also you gave me additional code which also useful for me. Thank a lot!
Tags
Grid
Asked by
Kirubakaran
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Kirubakaran
Top achievements
Rank 1
Share this question
or