We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Grid FilterBar Checkbox Filter

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:


5 Replies

RR Rajapandi Ravi Syncfusion Team December 27, 2022 01:47 PM UTC

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.


Rajapandi R

IS Iana Stapelberg December 27, 2022 02:33 PM UTC

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

RR Rajapandi Ravi Syncfusion Team December 29, 2022 11:47 AM UTC

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.



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


            <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>






export class AppComponent {

    public filterBarTemplate: any;



    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












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



Rajapandi R

IS Iana Stapelberg January 9, 2023 02:49 PM UTC

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!

RR Rajapandi Ravi Syncfusion Team January 11, 2023 03:19 AM UTC


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.

Live Chat Icon For mobile
Up arrow icon