1. Home
  2. Forum
  3. Angular - EJ 2
  4. Grid filter with multiselect checkbox

Grid filter with multiselect checkbox

Hi

I need create a multiselect dropdown with checkbox in grid filter.

I start with this code, but the dropdownList dont show the checkbox.

this.statusDataSource = [
{
text: 'aaaaaa',
value: '1',
},
{
text: 'bbbbbbb',
value: '2',
},
{
text: 'ccccccc',
value: '3',
},
];



public dropInstance: MultiSelect;

public filter: IFilter = {
ui: {
create: (args: { target: Element; column: object }) => {
const flValInput: HTMLElement = createElement('input', { className: 'flm-input' });
args.target.appendChild(flValInput);
this.dropInstance = new MultiSelect({
dataSource: new DataManager(this.statusDataSource),
fields: { text: 'text', value: 'value' },
placeholder: 'Select a value',
popupHeight: '200px',
mode: 'CheckBox',
});
this.dropInstance.appendTo(flValInput);
},
write: (args: { column: object; target: Element; parent: any; filteredValue: number | string }) => {
this.dropInstance.text = (args.filteredValue as string) || '';
},
read: (args: { target: Element; column: any; operator: string; fltrObj: Filter }) => {
args.fltrObj.filterByColumn(args.column.field, args.operator, this.dropInstance.text);
},
},
};




Any help is appreciated


Best regards


Diego


3 Replies
MS Manivel Sellamuthu Syncfusion Team August 12, 2021 10:30 AM UTC

Hi Diego, 

Greetings from Syncfusion support. 

Query: I need create a multiselect dropdown with checkbox in grid filter. I start with this code, but the dropdownList dont show the checkbox. 
 
We have validated your reported problem at our end and prepared a sample based on the shared code example. From that we suspect that you have not Injected the CheckboxSelection module to the MultiSelect component which is the cause of reported problem. To use checkbox mode, we need to inject the CheckBoxSelection module in the MultiSelect. Please refer the below code example and sample for more information. 

import { MultiSelect, CheckBoxSelection } from '@syncfusion/ej2-angular-dropdowns'; 
MultiSelect.Inject(CheckBoxSelection); 
 
@Component({ 
    selector: 'app-root', 
    templateUrl: 'app.component.html' 
}) 
export class AppComponent { 
    public data: Object[] = []; 
    public statusDataSource: Object[] =  [ 
        { 
          text: 'aaaaaa', 
          value: '1', 
        }, 
. . . 
        }, 
      ]; 
    public filterOptions: FilterSettingsModel; 
    public filter: IFilter; 
    public dropInstance: MultiSelect; 
 
    ngOnInit(): void { 
        this.data = orderDetails; 
         
        this.filterOptions = { 
            type: 'Menu' 
        }; 
        this.filter =  { 
            ui: { 
              create: (args: { target: Element; column: object }) => { 
                const flValInput: HTMLElement = createElement('input', { className: 'flm-input' }); 
                args.target.appendChild(flValInput); 
                this.dropInstance = new MultiSelect({ 
                  dataSource: new DataManager(this.statusDataSource), 
                  fields: { text: 'text', value: 'value' }, 
                  placeholder: 'Select a value', 
                  popupHeight: '200px', 
                  mode: 'CheckBox', 
                }); 
                this.dropInstance.appendTo(flValInput); 
              }, 
. . . 
            }, 
    }; 
} 
} 

 


Please let us know if you need further assistance. 

Regards, 
Manivel 


DD Diego Dorado Fernández August 13, 2021 10:54 AM UTC

Hi Manivel


Thanks for help. I'ts works perfectly


I need more help for retrieve the array of selected's checkboxes values for pass to the filter query.

How do I have to do it?

Best regards


Diego


MS Manivel Sellamuthu Syncfusion Team August 16, 2021 10:48 AM UTC

Hi Diego, 

Thanks for your update. 

We are glad that the provided solution helped you. 

You can retrieve the selected values of MultiSelect using the component’s instance and pass them to the filterByColumn method of the Grid. Please refer the below code example and sample for more information. 

export class AppComponent { 
    public data: Object[] = []; 
 .  .  . 
      ]; 
    public filterOptions: FilterSettingsModel; 
    public filter: IFilter; 
    public dropInstance: MultiSelect; 
 
    ngOnInit(): void { 
        this.data = orderDetails; 
         
        this.filterOptions = { 
            type: 'Menu' 
        }; 
        this.filter =  { 
            ui: { 
              create: (args: { target: Element; column: object }) => { 
                const flValInput: HTMLElement = createElement('input', { className: 'flm-input' }); 
                args.target.appendChild(flValInput); 
                this.dropInstance = new MultiSelect({ 
                  dataSource: new DataManager(this.statusDataSource), 
                  fields: { text: 'text', value: 'value' }, 
                  placeholder: 'Select a value', 
                  popupHeight: '200px', 
                  mode: 'CheckBox', 
                }); 
                this.dropInstance.appendTo(flValInput); 
              }, 
              write: (args: { column: object; target: Element; parent: any; filteredValue: number | string }) => { 
                this.dropInstance.text = (args.filteredValue as string) || ''; 
              }, 
// this method will trigger while clicking the filter button of the filter menu Dialog 
              read: (args: { target: Element; column: any; operator: string; fltrObj: Filter }) => { 
                                                                              // here we have passed the selected values 
                args.fltrObj.filterByColumn(args.column.field, args.operator, this.dropInstance.text); 
              }, 
            }, 
    }; 
} 
} 



Please let us know if you need further assistance. 

Regards, 
Manivel

Loader.
Up arrow icon