Kendo Grid not sending

1 Answer 31 Views
Grid
Adarsh
Top achievements
Rank 1
Adarsh asked on 10 Jan 2022, 07:36 AM | edited on 11 Jan 2022, 10:40 AM

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:

1 Answer, 1 is accepted

Sort by
1
Accepted
Georgi Denchev
Telerik team
answered on 12 Jan 2022, 10:03 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Adarsh
Top achievements
Rank 1
commented on 19 Jan 2022, 01:14 PM | edited

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
Telerik team
commented on 24 Jan 2022, 09:25 AM

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.

Tags
Grid
Asked by
Adarsh
Top achievements
Rank 1
Answers by
Georgi Denchev
Telerik team
Share this question
or