Hello Rajendra,

Thank you for posting in our community.

The Ignite UI for Angular Hierarchical Grid supports remote data operations such as remote virtualization, remote sorting, remote filtering and others. This allows the developer to perform these tasks on a server, retrieve the data that is produced and display it in the Hierarchical Grid. You can perform these tasks remotely and feed the resulting data to the Hierarchical Grid by taking advantage of certain inputs and events, which are exposed by the Hierarchical Grid. This means that remote operations are implemented manually, on an application as per your specific requirements. We have provided a few examples in Hierarchical Grid Remote Data Operations to demonstrate how this could be achieved. This topic and its samples can be considered as a general guidance how remote features are implemented. However, please keep in mind that particular implementation achieved within the application is beyond the scope of Infragistics support.

What I can suggest is to take a look at the Hierarchical Grid Remote Data Operations topic in our official documentation and to find how the Hierarchical Grid can work with remote data operations.

Please let me know if I could be of any further assistance.

Regards,
Viktor Kombov
Entry Level Software Developer
Infragistics, inc.

I have updated the previously provided sample where the Apollo package is not used anymore. Please test the sample on your side and let me know whether you find it helpful.

Please note that this is a just an example how the Advanced Filtering feature of IgxHierarchicalGrid can work with GraphQL server and you should make some changes in order the feature to work properly with the configuration on your side.

Regards,
Viktor Kombov
Entry Level Software Developer
Infragistics, Inc.

I have created a sample, demonstrating how the Ignite UI for Angular Hierarchical Grid can work with GraphQL.

By using the emitted FilteringExpressionsTree argument of the advancedFilteringExpressionsTreeChange event we can get all of the filtering expressions and build a GET query:

public ngAfterViewInit() {
 ...
    this.hGrid.advancedFilteringExpressionsTreeChange.subscribe(e => {
      ...
      this.remoteService.getData(dataState, filteringOperands).subscribe(
        (data: any[]) => {
          this.hGrid.isLoading = false;
          this.hGrid.data = data;
          this.hGrid.cdr.detectChanges();
        },
        (error: any) => {
          this.hGrid.emptyGridMessage = error.message;
          this.hGrid.isLoading = false;
          this.hGrid.cdr.detectChanges();
        }
      );
    });
  }

Then, all needed queries we can send to the server, where the filtering takes place:

public buildQueries(filteringOperands: any[]): any {
        const result: IFilteringOperand[] = [];
        filteringOperands.forEach(operand => {
            const fieldName = operand.FieldName;
            const searchValueString = typeof operand.searchVal === 'string' ? operand.searchVal : '';
            const searchValueNumber = typeof operand.searchVal === 'number' ? operand.searchVal : null;
            const conditionName = operand.condition.name;
            result.push({ fieldName, searchValueString, searchValueNumber, conditionName });
        });
        return JSON.stringify(result);
    }

The subscription for the advancedFilteringExpressionsTreeChange event of the child grids can be made when the gridCreated event is handled, which returns instances of the created child grid:

public gridCreated(event: IGridCreatedEventArgs, _parentKey: string) {
  ...
    const grid = event.grid
    event.grid.advancedFilteringExpressionsTreeChange.subscribe(e => {
      ...
      this.remoteService.getData(dataState, filteringOperands).subscribe(
        (data: any[]) => {
          grid.isLoading = false;
          grid.data = data;
          grid.cdr.detectChanges();
        },
        (error: any) => {
          grid.emptyGridMessage = error.message;
          grid.isLoading = false;
          grid.cdr.detectChanges();
        }
      );
    });
  }

Please keep in mind that I am using the Load on Demand feature for the initially loading of the child grids. More about this feature you can find here.

Please test the sample on your side and let me know whether you find it helpful.

Looking forward to hearing from you.

Regads,
Viktor Kombov
Entry Level Software Developer
Infragistics, Inc.