Filtering for hierarchies as well in toolbar

Question

Hello,I am aware that there is a filtering option for main header and the child levels in the hierarchical grid separately under each column header but I would like to know if there is an option in the grid toolbar for filtering out records based on values present in the parent level grid and also in the child levels as well.Warm regardsVigneswaran

Thiyagu Subramani · Accepted Answer

Hi Vigneswaran, 

Thanks for contacting Syncfusion support. 

Query: I would like to know if the search in the main grid toolbar can also search inside hierarchies/child levels.  If so can you kindly provide me with an example. 
 
Based on your query you want perform searching in both parent and child grids. So, we have prepared sample and in that sample we have used the actionBegin event to perform the searching in the child grids also when you perform searching in the parent Grid. 

In the actionBegin event we have taken the searchString from the arguments and assigned the same for child grid to perform the searching operation. For your convenience we have attached the sample so please refer them for your reference. 

Code Example: 




App.component.ts 

export class AppComponent { 
  @ViewChild("Grid") 
  public grid: GridComponent; 
  public parentData: Object[]; 
  public childGrid: any; 
  public secondChildGrid: any; 
  public toolbar = ["Search"]; 

  ngOnInit(): void { 
    this.parentData = employeeData; 
    this.childGrid = { 
      dataSource: orderDatas, 
      queryString: "EmployeeID", 
      allowPaging: true, 
      pageSettings: { pageSize: 6, pageCount: 5 }, 
      columns: [ 
        { 
          field: "OrderID", 
          headerText: "Order ID", 
          textAlign: "Right", 
          width: 120 
        }, 
        { field: "ShipCity", headerText: "Ship City", width: 120 }, 
        { field: "Freight", headerText: "Freight", width: 120 }, 
        { field: "ShipName", headerText: "Ship Name", width: 150 } 
      ] 
    }; 
  } 

  actionBegin(args) { 
    if (args.requestType === "searching") { 
      this.grid.childGrid.searchSettings = { key: args.searchString }; 
    } 
  } 
} 


Sample Link: https://stackblitz.com/edit/angular-w3d6dn-m21v7k?file=app.component.html 

Please get back to us if you need further assistance. 

Regards, 
Thiyagu S.