Search for main and child grid

[Iana Stapelberg]

Is there a way to have a common search at the top, that will search both main grid and child grid ( Hierarchy grid ) ?

We are specifically interested in the case, where parent row doesn't contain search data, but child row does. So we would like to see both in this case - child and parent rows. 

[Aishwarya Rameshbabu]

Hi Iana Stapelberg,

Greetings from Syncfusion support.

Upon reviewing your query, we have observed that you are attempting to search in both the parent and child Grid simultaneously. In our EJ2 Grid, the parent and child grid features operate independently for data actions like filtering and searching by default. If you search in the parent grid, the search will only be based on the parent grid records, and the same applies to the child grid. However, we have developed a sample to display search results in both the parent and child Grid by specifying the search key in the seachSettings of the child grid within the detailDataBound event of the parent Grid. This will show the search results upon expanding. Please refer to the provided sample and code example.

App.component.html

    detailDataBound(args):void { 

        var parentGrid = (document.getElementById(args.childGrid.parentDetails.parentID) as any)

        .ej2_instances[0];

        args.childGrid.setProperties({searchSettings: {

            key: parentGrid.searchSettings.key,

            fields: ['OrderID', 'ShipCity', 'Freight', 'ShipName'],

          }}) 

    }

 

Sample: https://stackblitz.com/edit/angular-n5aqou-w23xeq?file=src%2Fapp.component.ts,src%2Fapp.component.html

If you need any further assistance or have additional questions, please feel free to let us know.

API References:

detailDataBound

searchSettings

Regards

Aishwarya R

Attachment: HierarchyGrid_Search_51ae8c80.zip

[Iana Stapelberg]

Thank you for the reply.

Unfortunately, it doesn't seem to work. Here is a case from your example:

1. You see there is 'Graz' in Ship City

2. But when I search for it, I get nothing:

[Aishwarya Rameshbabu]

Hi Iana Stapelberg,

As mentioned earlier, the parent and child grid features operate independently when performing data actions. Therefore, it is not feasible to combine the search functionality for the parent and child grid. This integration can only be partially implemented, rather than fully. For instance, in the shared sample, we have passed the search key from the parent grid to the child grid. This configuration will only show search results in the child grid that correspond to the search criteria in the parent grid; if the search key is not found in the parent grid, then no results will be displayed, as the search is initially performed in the parent grid before moving to the child grid.

Regards

Aishwarya R

[Iana Stapelberg]

I understand that there can be technical limitations, but this is a very common case. 

Example: You have an order (main grid) with order lines (child grid), and you try to find all orders where the customer bought an 'X' item. 

The data will be in the child grid, but you want to see both - the child grid and the parent grid. 

Is there a way to implement a custom search that would search in both parent and child grid? 

[Aishwarya Rameshbabu]

Hi Iana Stapelberg,

In the sample we provided earlier, we used a custom search to display the search results in both parent and child grids. However, if the search key is not found in the parent grid, no records will be displayed, even if the key is present in the child grid. Since the child grids are rendered only when the parent grid is expanded, it is not possible to search for a record that is present only within the child grid using the custom search in the hierarchy Grid.

Regards

Aishwarya R