Search function in hierarchical grid structure

[Manuel]

Hi, 

I would like to add the global data search function in three tables represented in three nested grids.

For example, in a hierarchical grid structure like the one you have as an example: Employee -> Orders -> Customers.

https://blazor.syncfusion.com/demos/datagrid/hierarchy-grid/

How could I search all three grids at the same time?

Thanks

[Rahul Narayanasamy]

Hi Manuel, 

Greetings from Syncfusion. 

Query: Search function in hierarchical grid structure - For example, in a hierarchical grid structure like the one you have as an example: Employee -> Orders -> Customers. https://blazor.syncfusion.com/demos/datagrid/hierarchy-grid/ How could I search all three grids at the same time? 

We have validated your query and you want to perform searching operation for all levels of hierarchy Grid. We would like inform you that the searching operation for all levels of hierarchy Grid at the same time is not possible because we have rendered each individual Grid for all the detail element. So we could not able to perform the searching operation for all levels of hierarchy Grid at the same time. 

Please let us know if you have any concerns. 

Regards, 

Rahul  

[Manuel]

Ok, but would it be possible that the search was done only in the last nested grid Customers as in the image?

How could I place the search button in the top left?

Thanks

[Rahul Narayanasamy]

Hi Manuel, 

Thanks for the update. 

We are currently validating the your query at our end and we will update the further details within two business days. Until then we appreciate your patience. 

Regards, 

Rahul 

[Rahul Narayanasamy]

Hi Manuel, 

Thanks for your patience and sorry for the delay in get back to you. 

We have validated your query and we suggest you to add the Search toolbar item for last level of nested grid to achieve your requirement.  

If we want to perform the search operation externally(render search box in top and perform search in last level of hierarchy grid), then we need to add reference(@ref) to each last level Grid when opening the last hierarchy Grid and need to call the SearchAsync method manually for all the last level grid manually when performing search operation. So the above process will be a more complex one since we have rendered each individual Grid for each detailed row. 

So we suggest you to add the search toolbar item in last level of hierarchy Grid and perform search operation in that Grid. Find the below code snippets for your reference. 

<SfGrid DataSource="@Employees"> 

                <GridTemplates> 

                    <DetailTemplate> 

                        @{ 

                            var employee = (context as EmployeeData); 

                            <SfGrid TValue="Order" Query="@GetEmployeesQuery(employee)" AllowPaging="true"> 

                                <GridPageSettings PageSize="8"></GridPageSettings> 

                                <SfDataManager Url=https://js.syncfusion.com/demos/ejservices/Wcf/Northwind.svc/Orders CrossDomain="true"></SfDataManager> 

                                <GridTemplates> 

                                    <DetailTemplate Context="CustomerContext"> 

                                        @{ 

                                            var orders = (CustomerContext as Order); 

                                             //last level of hierarchy Grid 

                                            <SfGrid TValue="CustomerDetails" Query="@GetOrderQuery(orders)" Toolbar="@(new List<string>() { "Search" })"> 

                                                <SfDataManager Url=https://js.syncfusion.com/demos/ejservices/Wcf/Northwind.svc/Customers CrossDomain="true"></SfDataManager> 

                                                <GridColumns> 

                                                    <GridColumn Field=@nameof(CustomerDetails.CustomerID) HeaderText="Customer Name" Width="110"></GridColumn> 

                                                    . ..  

                                                </GridColumns> 

                                            </SfGrid> 

                                        } 

                                    </DetailTemplate> 

                                </GridTemplates> 

                                . ..  

                            </SfGrid> 

                        } 

                    </DetailTemplate> 

                </GridTemplates> 

                . ..  

            </SfGrid> 

Please let us know if you have any concerns. 

Regards. 

Rahul