Kendo grid - create new sub row based on condition

[Kirubakaran]

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>

[Alex Hajigeorgieva]

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

[Kirubakaran]

Wow Alex Hajigeorgieva, This is what i expected and also you gave me additional code which also useful for me. Thank a lot!