How to filter multiple records using the filter bar template in JavaScript Grid?
In JavaScript 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
You can find the samples here:
Conclusion
I hope you enjoyed learning about how to filter multiple records using the filter bar template in JavaScript Grid.
You can refer to our JavaScript Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Grid example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
