1. Home
  2. Forum
  3. Angular - EJ 2
  4. Grid checkbox filter custom datasource

Grid checkbox filter custom datasource

Hello Syncfusion Team,

I want to change the datasource of my checkbox filter to a custom datasource (true and false). I tried the approach of this thread https://www.syncfusion.com/kb/11339/how-to-change-the-data-source-for-checkbox-filter-popup-in-grid but I think it didn't work for me because I am using an async data source on my grid.


In my code when the dataStateChange event is called, just like in the normal string filters I am ignoring the request when it is a checkbox filter:

public dataStateChange(state: DataStateChangeEventArgs): void {

// deny request to server when opening filter
if (state?.action?.requestType?.toString() == 'stringfilterrequest') {

// focus input of filter popup when opened
setTimeout(() => {
(document.querySelectorAll('input.e-flmenu-input')[0] as HTMLInputElement).focus();
}, 0);

return;
}

// deny request to server when opening checkbox filter
if (state?.action?.requestType?.toString() == 'filterchoicerequest') {
return;
}

this.service.execute(state, 'api/Admin/Enterprises');
}


The outcome is that there is just a loading spinner in the filter popup. There is also no error in the console.



Am I doing something wrong or is there simply no way for me to set a custom data source to the checkbox filter when I am using an async data source?


You can find more of my code and grid in the attachments.


Kind Regards, Peter


Attachment: grid_13254819.zip


9 Replies 1 reply marked as answer
JC Joseph Christ Nithin Issack Syncfusion Team February 3, 2022 05:10 PM UTC

Hi Peter, 

  Greetings from Syncfusion support. 

  Based on your requirement, you want to change the datasource of the checkbox filter in your grid (true and false).  Your requirement can be achieved by changing the ‘args.filterModel.options.dataSource’ to your custom data source. Then in the dataStateChange event return the `state.dataSource` method, where you pass the datasource already set in the actionBegin event. 

Please refer the code example. 


  actionBegin(args) { 
    if ( 
      args.requestType == 'filterSearchBegin' || 
      args.requestType == 'filterchoicerequest' 
    ) { 
      args.filterModel.options.dataSource = [ 
        { ShipCity: true }, 
        { ShipCity: false }, 
      ]; 
    } 
  } 
 
  public dataStateChange(state: DataStateChangeEventArgs): void { 
    if ( 
      state.action && 
      (state.action.requestType == 'filterchoicerequest' || 
        state.action.requestType == 'filterSearchBegin' || 
        state.action.requestType == 'stringfilterrequest') 
    ) { 
      if (state.action.filterModel.options.field == 'ShipCity') { 
        return state.dataSource(state.action.filterModel.options.dataSource); 
      } else { 
        this.service.getData(state).subscribe((e) => state.dataSource(e)); 
      } 
    } else { 
      this.service.execute(state); 
    } 
  } 




Please get back to us for further details. 

Regards, 
Joseph I. 


Marked as answer
PL Peter Linecker February 8, 2022 08:03 AM UTC

Hi Syncfusion Team,


Thanks for your reply. Your approach is working but only when no other filter is active. Whenever I filter another column and then want to filter with my true/false filter column then the filter shows no entries and when i delete the other filters the true/false filter works again.


Here is my Code:

// set IsActive filter to true and false
  actionBegin(args: any) {
    if (args.requestType == 'filterSearchBegin' || args.requestType == 'filterchoicerequest') {
      args.filterModel.options.dataSource = [
        { IsActive: true },
        { IsActive: false },
      ];
    }
  }

  public dataStateChange(state: any): void {

    // set IsActive filter to true and false
    if (state.action && (state.action.requestType == 'filterchoicerequest' || state.action.requestType == 'filterSearchBegin')) {
      if (state.action.filterModel.options.field == 'IsActive') {
        state.dataSource(state.action.filterModel.options.dataSource);
      } else {
        state.skip = 0;
        this.service.getData(state, 'api/Admin/Enterprises').subscribe((e) => state.dataSource(e));
        return;
      }
    }

    // deny request to server when opening filter
    if (state?.action?.requestType?.toString() == 'stringfilterrequest') {

      // focus input of filter popup when opened
      setTimeout(() => {
        (document.querySelectorAll('input.e-flmenu-input')[0] as HTMLInputElement).focus();
      }, 0);

      return;
    }

    // deny request to server when opening checkbox filter
    if (state?.action?.requestType?.toString() == 'filterchoicerequest') {
      return;
    }

    this.service.execute(state, 'api/Admin/Enterprises');
  }


Here is a screenshot of the filter:


Do you have an idea why this happens?


Kind Regards, Peter


SK Sujith Kumar Rajkumar Syncfusion Team February 10, 2022 11:37 AM UTC

Hi Peter, 
 
When custom filter data source is set to a column then it will not display any data in the checkbox filter when checking after applying filter for other columns. This is because the checkbox filter data will be generated based on the previous filter predicates, i.e., Consider two columns – ‘Discontinued’ and ‘Labels’ in the Grid. Now when ‘Discontinued’ column is filtered with ‘false’ value, then the Grid will check and retrieve the data matching this filter predicate and display the corresponding values for the ‘Labels’ column filter data. So if we assign custom data source to the ‘Labels’ column, the previous filter predicate will not match with that of the custom data and so the checkbox will be empty. And if we try to push the ‘Label’ data(based on the filtered predicate) using filtered records, it will cause problems when the filter data is less than the ‘Label’ data and lead to displaying duplicate records in the Grid. 
 
So when using this approach of setting custom data for filter column, that column filter checkbox data in excel filter will not be displayed when another column filter is already applied. This is the default behavior of this case. 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R 


PL Peter Linecker October 5, 2022 01:20 PM UTC

Hi Syncfusion-Team,


If I understood you right you are telling me that there is no way that I can filter a column and then filter another column with a custom filter?


So in my grid I can't filter the column "Label" and then filter the column "Active/Inactive" where i customized the filter entries with "active" and "inactive", because there would be no entries in the checkbox filter?


Kind Regards,
Peter


RS Rajapandiyan Settu Syncfusion Team October 6, 2022 01:14 PM UTC

Hi Peter,


Thanks for your update.


Query: If I understood you right you are telling me that there is no way that I can filter a column and then filter another column with a custom filter?


Yes, the checkbox items are shown based on the previous filter predicates. If you provide custom dataSource on particular Checkbox filter, then it will not be shown when other columns are filtered.


  1. Why do you want to provide custom dataSource for the Checkbox filter on a particular column?
  2. We suggest you to return the grid data in array of object format instead of custom dataSource while opening the checkbox filter.

public dataStateChange(state: DataStateChangeEventArgs): void {

    if (

      state.action &&

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

        state.action.requestType == 'filterSearchBegin' ||

        state.action.requestType == 'stringfilterrequest')

    ) {

      this.service.getData(state).subscribe((e) => state.dataSource(e)); // bind array of object to state.dataSource method

    } else {

      this.service.execute(state);

    }

  }

 


  1. What are the issues you have faced with the above way?


Regards,

Rajapandiyan S


PL Peter Linecker October 7, 2022 06:56 AM UTC

Hello Syncfusion-Team,


we need to use a custom data source in the grid filter, because for example in this grid we are using an enum in the column "Field type":

export enum EnCustomFieldDataType {
  String,
  Number,
  Date,
  Selection,
  CheckBox,
  MultiSelect,
}


And we can't just display 0, 1, 2, ... in the checkbox filter because no one would know what that value stands for. We have to display the text values behind the enum, for example 0 => Text; 1 => Number; and so on. 




The problem that I have faced with the above way is that when you filter another column first and then filter the column with the custom data source filter, there will be no values displayed.


Is there any way to make this work?


Kind Regards,
Peter


RS Rajapandiyan Settu Syncfusion Team October 10, 2022 12:15 PM UTC

Hi Peter,


Thanks for contacting Syncfusion support.


By default, the EJ2 Grid column only supports number, string, date, dateTime, Boolean, checkbox type values, and it does not support Enum & array type values. Refer to the below documentation.


columnType: https://ej2.syncfusion.com/documentation/api/grid/columnType/ 


So, the Grid does not support any data actions like Filtering, Sorting, Editing, Searching, Grouping, etc., on the Enum type of column. This is the behavior of EJ2 Grid.


Regards,

Rajapandiyan S


PL Peter Linecker October 11, 2022 10:28 AM UTC

Hi Syncfusion-Team,


Sorry but I cannot imagine that it is not possible to assign a custom data source to the checkbox filter. Maybe I didn't express it very clearly. For example in this grid we have to be able to first filter the column "Name" and then filter the column "Field type" where we would have to assign a custom data source where we put following entries: "Text", "Number", "Checkbox", "Multiselect", "Dropdown" and "Date/Time".



Is this really not possible with your grid?


Kind Regards,

Peter


RS Rajapandiyan Settu Syncfusion Team October 12, 2022 02:08 PM UTC

Hi Peter, 


Thanks for your update.


We have created a new ticket under your account for the reported query. We suggest you follow up with that ticket for further updates.


Regards, 

Rajapandiyan S 


Loader.
Up arrow icon