Kendo UI php 2 Grids
3 Answers 30 Views
m
Top achievements
Rank 1
m asked on 29 Apr 2021, 06:26 PM | edited on 05 May 2021, 07:25 PM
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.

3 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 30 Apr 2021, 07:38 AM

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

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/.

I am using UI for PHP...
- by
m
Top achievements
Rank 1
on 30 Apr 2021, 05:34 PM
0
Tsvetomir
Telerik team
answered on 05 May 2021, 01:12 PM

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:

Let me know if additional information is required.

 

Kind regards,
Tsvetomir
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/.

ok thank you for the info... can you provide a dojo example of this working with both grids in a hierarchy/detail template mode...
- by
m
Top achievements
Rank 1
on 05 May 2021, 02:01 PM
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
- by
m
Top achievements
Rank 1
on 06 May 2021, 01:04 AM
0
Tsvetomir
Telerik team
answered on 10 May 2021, 09:50 AM

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

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/.

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?
- by
m
Top achievements
Rank 1
on 10 May 2021, 03:46 PM

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.

- by
Tsvetomir
Telerik team
on 11 May 2021, 09:34 AM
ok thx.. I added that to the dojo example https://dojo.telerik.com/eVUjAhET/7
- by
m
Top achievements
Rank 1
on 11 May 2021, 03:14 PM
now just looking at implementing for n-level hierarchies..
- by
m
Top achievements
Rank 1
on 11 May 2021, 03:15 PM

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. 

 

- by
Tsvetomir
Telerik team
on 13 May 2021, 02:07 PM
Tags
Grid
Asked by
m
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Tsvetomir
Telerik team
Share this question
or