Grid FilterBar Checkbox Filter

[Iana Stapelberg]

I would like to have something like this.

I would like to have a simple checkbox in the filter, that will show 'true' values when checked and 'false' values when un-checked. 

I tried something like this, but it doesn't filter:

Thankyou!

[Rajapandi Ravi]

Hi Iana,

Greetings from Syncfusion support

From your query we suspect that you are rendering checkbox in the filterbar template and like to filter the true/false value. When the filterbar template is checked you like to filter the true values and when it is unchecked you like to filter the false values. So please confirm on what case you like to reset the filter (clear filter for the respective column). Please share your use case scenario with detailed description.

If we misunderstood anything wrongly, please share your requirement with detailed description.

Regards,

Rajapandi R

[Iana Stapelberg]

Thank you for the reply.

I apologize, I think it makes sense to change the requirement a bit. I would like to see 'true' when it's checked, and everything, when un-checked. 

Here is the case scenario:

• We have rows with column 'has errors' which can be true or false
• We would like users to check the checkbox in the header, and it will show only rows that 'has errors' is true
• If they uncheck, they should see everything. 
  

I hope it makes sense, please let me know, if I can provide more detail

[Rajapandi Ravi]

Hi Iana,

Greetings from Syncfusion support

Based on your requirement we have prepared a sample and achieved your requirement by using Filterbar template feature of Grid. Please refer the below code example and sample for more information.

App.component.html

 

<ejs-grid #grid id="Grid" [dataSource]='data' allowPaging='true' allowFiltering='true' [pageSettings]="pageOptions">

        <e-columns>

            <e-column field='CategoryName' headerText='Category Name' width='150'></e-column>

            <e-column field='UnitsInStock' headerText='Units In Stock' width='150' textAlign='Right'></e-column>

            <e-column field='Discontinued' headerText='Discontinued' width='150' textAlign='Center' [filterBarTemplate]='filterBarTemplate' type='boolean'></e-column>

        </e-columns>

    </ejs-grid>

 

App.component.ts

 

export class AppComponent {

    public filterBarTemplate: any;

 

    @ViewChild('grid')

    public grid: GridComponent;

    constructor( ) {

       

    }

   

    public ngOnInit(): void {

        this.filterBarTemplate = {

            create: (args: { element: any, column: any }) => {

                let input: any = document.createElement('input');

                input.id = 'ProductName';

                return input;

            },

            write: (args: { element: any, column: any }) => {

                let inputobj: CheckBox = new CheckBox({

                    change: function(args) {

                    var grid = (document.getElementById('Grid') as any).ej2_instances[0];

                    if (args.checked) {

                        grid.filterByColumn('Discontinued', 'equal', args.checked); //filter the column with true value

                       }

                    else {

                        grid.removeFilteredColsByField('Discontinued'); //remove the filtering when the checkbox is unchecked

                        }

                    }

                });

                inputobj.appendTo('#ProductName');

            },

        }

    }

 

   

}

 

Sample: https://stackblitz.com/edit/angular-yeto7g-jrke4v?file=app.component.ts,app.component.html

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/filtering/filter-bar/#filter-bar-template-with-custom-component

Screenshot:

Regards,

Rajapandi R

[Iana Stapelberg]

Thank you for the reply. We had to make a slight style change, otherwise, checkbox would move on click. But the main logic worked. Appreciate the help!

[Rajapandi Ravi]

Iana,

We are happy to hear that our provided solution was helpful to achieve your requirement at your end.

Please get back to us if you need further assistance.