Shows 'No records found' in menu type boolean operator filter

[Adeeb Basheer]

I am doing server side pagination, So instead setting the whole array of data, only setting data for the page by setting dataSource with result and count

this.usersData = { result: response.data.users, count: response.data.totalUsers };
this.filterSettings = { type: 'Menu' }
this.pageSettings = { pageSize: 10 }
​
<ejs-grid [dataSource]="usersData" [allowFiltering]="true" [allowSorting]="true" [filterSettings]="filterSettings" [pageSettings]="pageSettings" >
  <e-columns>
    <e-column field="first_name" headerText="First Name"></e-column>
    <e-column field="last_name" headerText="Last Name"></e-column>
    <e-column field="email" headerText="Email"></e-column>
    <e-column field="is_verified" headerText="Verified">
      <ng-template let-data>{{data.is_verified ? 'Yes' : 'No' }}</ng-template>
    </e-column>
  </e-columns>
</ejs-grid>

[Rajapandi Ravi]

Hi Adeeb,

Greetings from Syncfusion support

When you bind the Grid datasource as result and count format, it will work like as custom data binding concept. For every grid actions(such as Filter, Page, etc.,), we have triggered the dataStateChange event and, in that event arguments we have send the corresponding action details(like skip, take, filter field, value, sort direction, etc.,) based on that, you can perform the action in your service and return the data as a result and count object. Please refer the below documentation for more information.

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/observables#provide-excel-filter-data-source

Regards,

Rajapandi R

[Adeeb Basheer]

Thanks Rajapandi for your reply,

Yes, I have implemented dataStateChange event for filtering, sorting and paging by utilising the take, skip, where and sorted properties of state. But the dataStateChange event doesn't trigger any event on opening filter for boolean field and doesn't have any information about the column or columnName.

Regards,

Adeeb

[Rajapandi Ravi]

Adeeb,

For every grid actions(such as Filter, Page, etc.,), we have triggered the dataStateChange event and, in that event arguments we have send the corresponding action details(like skip, take, filter field, value, sort direction, etc.,) based on that, you can perform the action in your service and return the data as a result and count object.   

Note: ‘dataStateChange’ event is not triggered at the Grid initial render. If you are using a remote service, you need to call your remote service by manually with a pagination query (need to set skip value as 0 and take value based on your pageSize of pageSettings in Grid. If you are not defined pageSize in pageSettings, you need to send the default value 12 ) in ngOnInit. 

When typing a value in Menu filter dialog/ opening the Excel Filter Dialog you should return the result value alone to the Grid otherwise you should return the data as “{result: […], count: …}” format
to the Grid.  

dataStateChange: https://ej2.syncfusion.com/angular/documentation/api/grid/#datastatechange

 

[app.component.ts]

  public dataStateChange(state) {

    if ( state.action && (state.action.requestType == 'filterchoicerequest' ||

        state.action.requestType == 'filtersearchbegin' || state.action.requestType == 'stringfilterrequest')) {

      // below code will be executed when

      // 1. Typing the value in Menu Filter Dialog

      // 2. Opening the Excel Filter dialog

      // 3. Searching the value in excel filter dialog

      state.skip = 0;

      this.service.getData(state).subscribe((e) => {

        state.dataSource((e as any).result); // bind array of Objects to the Grid

      });

    } else {

      // Handled all the other Grid actions like paging, sorting etc.. by using dataState change event

      this.service.getData(state).subscribe((gridData) => {

        this.grid.dataSource = gridData;

      });

    }

  }

 

[Adeeb Basheer]

Hi Rajapandi,

1. dataStateChange is not triggered on opening menu filter dialog for boolean fields. 
   
2. How to set data source for filters values

[Adeeb Basheer]

Also the url you provided is not a valid url, I am using syncfusion v19.4.56

[Rajapandi Ravi]

Adeeb,

Before we start providing solution to your query, we need some information for our clarification. So, please share the below details that will be helpful for us to provide better solution.

1)           Share your complete Grid rendering code, we would like to check your implementation.

2)           If possible, please share any issue reproducible sample that would be helpful for us to validate.