Kendo Grid not sending

[Adarsh]

In previous version of kendo UI 2017 R3, kendo grid was sending separate instances of row when expanding multiple rows together. But, in latest version Kendo UI 2021 R3, it is sending all the instances together, due to which DetailInit method is repeating the rows.

 

Steps:

Copy paste the below code in kendo dojo

Select old version 2017 R3 and run.

Then change the version to 2021 R3 then run.

 

kendo Dojo Code:

<script>
  (function onDojoReady(global, $, kendo){
      
      function InitChildGrid(e){
              var row = e.detailRow;
        
        var jGrid = $("<div />", { "class": kendo.format("grey-detail-row js-grey-detail-row_{0}_{1}", e.data.ID, e.data.FirstName) });
        
        var dataSource = [
          {
          ID: e.data.ID,
            FirstName: e.data.FirstName,
            LastName: e.data.LastName
          }
        ];
        
        
        // This should be only shown in Adarsh.
        if(e.data.ID == 1){
        dataSource.push({
          ID: 4,
            FirstName: "hello",
            LastName: "world"
          });
        }
        
        if(e.data.ID == 2){
        dataSource.push({
          ID: 5,
            FirstName: "Super",
            LastName: "Duper"
          });
        }
        
        jGrid.appendTo(e.detailCell).kendoGrid({
        scrollable: false,
          //sortable: true,
          //pageable: true,
          //groupable: false,
          //selectable: 'row',
          dataSource: dataSource, 
          columns: [
            { field: "ID" },
            { field: "FirstName" },
            { field: "LastName" }
          ]
        }).data("kendoGrid");
      }
      
      function InitParentGrid(){
      var dataSource = [
          {
          ID: 1,
            FirstName: "Adarsh",
            LastName: "Choudhary"
          },
          {
          ID: 2,
            FirstName: "Shashwat",
            LastName: "Singh"
          },
          {
          ID: 3,
            FirstName: "Omkar",
            LastName: "Gokale"
          }
        ];
        
        var jGrid = $("#ParentGrid");
        var kGrid = jGrid.kendoGrid({
          dataSource: dataSource,
          dataBound: function(){
          this.expandRow(this.tbody.find("tr.k-master-row"));
          },
          detailInit: InitChildGrid,
        scrollable: false,
          selectable: 'row',
          columns: [
            { field: "ID" },
            { field: "FirstName" },
            { field: "LastName" }
          ]
        }).data("kendoGrid");
        
      }
    
      $(document).ready(function(){
      InitParentGrid();
      });
      
    })(window, jQuery, kendo);
  </script>
  
  <div id="ParentGrid"></div>

Output in old version:

Output in latest version:

[Georgi Denchev]

Hello, Adarsh,

Thank you for the provided code snippets.

In newer versions you can iterate over the parent rows and expand them individually in the dataBound event:

            dataBound: function() {
              let grid = this;
              
              grid.tbody.find("tr.k-master-row").each(function(i, row) {
                grid.expandRow(row);
              });
            }

Runnable Dojo:

https://dojo.telerik.com/@gdenchev/EcarozUB 

Let me know if you have any questions.

Best Regards,
Georgi Denchev
Progress Telerik

[Adarsh]

Thankyou Georgi for the response, currently to move forward I have done with iteration approach but, in previous version of kendo the expandRow process was asynchronous, like it was sending them parallelly. But in current version it is sending them together, due to which the application will have a heavy performance impact. Like, for now it is only 3 rows, but it can be 10 or 15, doing it one after another is not very efficient.

Do you have any other solution to this?

 

[Georgi Denchev]

Hi, Adarsh,

The logic for the old expansion of the rows was to simply perform a "click" on the expand icon. I would advise that you use the current approach, however if you still prefer the old one, you can achieve it like this:

            dataBound: function() {
              let grid = this;
              let rowSelector = "tr.k-master-row";
              $(rowSelector).find('> td .k-i-expand').click();
            },

You can also download and view the source code of the older versions from your profile page.