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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to filter multiple records using the filter bar template

Platform: JavaScript - EJ 2 |
Control: Grid

You can filter multiple records in the grid column by using a filter bar template. It is used to render a Multi Select component and create predicates based on which query is formed and executed using the data manager to get the filtered data. This is explained in detail below,

Initially, the column’s filterBarTemplate is used for rendering template using its read, write and destroy functions. In the read function, the multiselect component is initialized and rendered to the filter bar and in its change event, grid data is filtered based on the multiselect values using the data's predicates based on which query is formed and executed using the data manager. The filtered data returned is then assigned to the grid's dataSource.

This is explained in the following code snippet,

var dropInstance;
 
// Column's filter template function
filterBarTemplate: {
        create: function(args) {
            return ej.base.createElement('input', { className: 'flm-input' });
        },
        write: function(args) {
            // Multiselect is initialized 
            dropInstance = new ej.dropdowns.MultiSelect({
                change: (arg) => {
                    var arrVal = arg.value;
                    if (arrVal.length === 0) {
                        // If the multiselect does not contain any value then the entire data will be assigned to the grid's datasource 
                        var OrginalData = new ej.data.DataManager(data).executeLocal(new ej.data.Query());
                        grid.dataSource = OrginalData;
                    } else {
                        var predicate = [];
                        // Predicates are generated for the selected values 
                        for (let x = 0; x < arrVal.length; x++) {
                            predicate = (predicate.length === 0) ? new ej.data.Predicate('ShipCountry', 'equal', arrVal[x]) : predicate.or('ShipCountry', 'equal', arrVal[x]);
                        }
                        // Data manager is executed with query formed from the generated predicates 
                        var filteredData = new ej.data.DataManager(data).executeLocal(new ej.data.Query().where(predicate));
                        // Filtered data is assigned as the grid's data source 
                        grid.dataSource = filteredData;
                    }
                },
                // Multiselect's data source 
                dataSource: ['Germany', 'Brazil', 'France', 'Belgium'],
            });
            dropInstance.appendTo(args.element.parentElement);
        },
        destroy: function() {
            dropInstance.destroy();
        }
    } 
};

 

Since the multi select's input border value will be set in the grid considering it as a normal filter bar, the following CSS needs to be included to override it. 

.e-grid .e-filterbarcell input.e-dropdownbase {
        border-color: white !important;
}

 

 

Output

Multiple filtering in column

 

You can find the samples here:

JavaScript (ES5) sample

React sample

 

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile