Using kendo Grid Jquery - want to add details expansion panel to some rows

1 Answer 47 Views
Top achievements
Rank 1
paul asked on 04 Nov 2021, 04:40 PM


we have the kendo grid jquery working. And now want to add a details expansion panel to some rows.

The example I will follow is here


I have a question, not all table rows will have a details row, which depends on a data field value.  How and where in the init of the details panel to add this logic to either add the details row or not add it.

Example code would be greatly appreciated.





1 Answer, 1 is accepted

Sort by
Georgi Denchev
Telerik team
answered on 09 Nov 2021, 08:17 AM

Hi, Paul,

The detail row will not be initialized until it is expanded. In this scenario you can remove the Expand icon from the rows that you don't wish to have a detail template.

Example using the dataBound event:

                dataBound: function() {
                  let grid = this;
                  let data = grid.dataSource.view();
                  data.forEach(function(x, i) {
                    // Remove the hierarchy icon based on the data in the row.
                  if(x.FirstName == "Nancy") {
                      let row = grid.tbody.find("[data-uid='"+x.uid+"']");
                      // Find the expand icon in the row and remove it.

Runnable Dojo: 

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

Asked by
Top achievements
Rank 1
Answers by
Georgi Denchev
Telerik team
Share this question