Kendo UI php 2 Grids

[m]

just wondering if anyone has a solution to using the expand/collapsegroup events and detailexpand/collapse events to control multiple grids (both grids contain the same rows with the same columns with a unique identifier - ID - The two grids just show additional data). In other words if I open a group/detail on one grid the other grid opens closes.

[Dimiter Madjarov]

Hello,

Could you please confirm which product is being used - Kendo UI for Angular or UI for PHP, so we could provide relevant information about the scenario?

I am looking forward to hearing from you.

Regards,
Dimiter Madjarov
Progress Telerik

[m]

I am using UI for PHP...

[Tsvetomir]

Hello,

A row of the second grid can be programmatically closed/opened when the user interacts with the first grid. However, this is a functionality that should be additionally implemented. 

For instance, within the detailExpand and detailCollapse, you should access the corresponding row in the second grid. After that, you should expand it or collapse it by passing its TR element to any of the following methods:

• https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/expandrow
• https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/collapserow

Let me know if additional information is required.

 

Kind regards,
Tsvetomir
Progress Telerik

[m]

ok thank you for the info... can you provide a dojo example of this working with both grids in a hierarchy/detail template mode...

[m]

also would like to see in the example a hierarchy of level 1, level 2, level 3 and any time a new level 3 expands that same row expands opens acorss the grids and all other level 3 rows collapse

[Tsvetomir]

Hi,

The connection between the two grids could happen via the API methods mentioned earlier. You could check out the following POC that demonstrates the collapse/expand relationship between two grids:

https://dojo.telerik.com/eVUjAhET

The logic could be extended to feature the multilevel expand/collapse. For N-level hierarchies, you might want to use recursion and first go up to the first level and then drill down on the second grid. 

 

Regards,
Tsvetomir
Progress Telerik

[m]

ok thank you.. and should you be able to do a get by FirstName rather than EmployeeID.. ie dataSource.get(dataItem.FirstName); I am looking at the details of dataItem and have tried this but its not working?

[Tsvetomir]

The get() method of the data source would work out only for the field that has been specified in the schema.model.id property. 

If you would like to access the data item by another field, you would have to loop through the data items of the respective grid manually and obtain the item. The data() method of the data source returns the data set and you could loop over it.

[m]

ok thx.. I added that to the dojo example https://dojo.telerik.com/eVUjAhET/7

[m]

now just looking at implementing for n-level hierarchies..

[Tsvetomir]

There are several approaches that you could undertake. The first one would be to assign different event handlers for the detailCollapse and detailExpand events to each level of the grid hierarchy. So that the logic for the inner grids would be similar to the one for the two main grids. 

Alalternatively, you could recursively check if the current grid is nested inside another grid by using the jQuery closest() method and using the "[data-role='grid']" selector. 

The third option would be to give names to the detail grids inside the detailInit method and make sure that the detail grids from the first hierarchy have similar names to the grids for the second hierarchy. For instance, if you are inside a grid with ID "grid_firstname_1", you should be looking for a grid with ID "grid_firstname_2" in the second hierarchy.