Custom Filtering With Multi-select Drop Downs
I have a grid containing three multiselect controls in the toolbar which are to be used to filter the grid datasource based on selections made. At the moment, I have the below fu
Solution 1:
I came up a solution which simplifies the filtering substantially. Instead of adding/removing/updating filters, I clear the datasource filter during the change
event of any of the multiselect components, determine which filters are to be applied based on the selected item(s) in each multiselect and build a filter object based on the selections, like so:
function applyClientFilters() {
var grid = $("#reportGrid").data("kendoGrid");
var gridDataSource = grid.dataSource;
// clear existing datasource
gridDataSource.filter([]);
// extract selected items from each of the three multiselect controls
var selectedAnalytes = $("#analyte").data("kendoMultiSelect").value();
var selectedMethods = $("#method").data("kendoMultiSelect").value();
var selectedInstruments = $("#instrument").data("kendoMultiSelect").value();
// setup filter object (using and logic)
var filter = {
logic: "and",
filters: [] // ready for filter from each of the three multiselect controls
};
// loop over each of the three extracted selected items variables
// push new filter into array of filters with or logic on each filter
if (selectedAnalytes.length > 0) {
var analyteFilter = {
logic: "or",
filters: [] // ready for filter for each of the selected analytes
};
for (var i = 0; i < selectedAnalytes.length; ++i) {
analyteFilter.filters.push( { field: "AnalyteID", operator: "eq", value: parseInt(selectedAnalytes[i]) } )
}
filter.filters.push(analyteFilter);
}
if (selectedMethods.length > 0) {
var methodFilter = {
logic: "or",
filters: [] // ready for filter for each of the selected methods
};
for (var i = 0; i < selectedMethods.length; ++i) {
methodFilter.filters.push({ field: "MethodID", operator: "eq", value: parseInt(selectedMethods[i]) })
}
filter.filters.push(methodFilter);
}
if (selectedInstruments.length > 0) {
var instrumentFilter = {
logic: "or",
filters: [] // ready for filter for each of the selected instruments
};
for (var i = 0; i < selectedInstruments.length; ++i) {
instrumentFilter.filters.push({ field: "InstrumentID", operator: "eq", value: parseInt(selectedInstruments[i]) })
}
filter.filters.push(instrumentFilter);
}
// apply filter query to datasource
gridDataSource.query({
filter: filter,
pageSize: 10,
page: 1,
group: [{
field: "InstrumentName",
dir: "asc"
}, {
field: "AnalyteName",
dir: "asc"
}, {
field: "MethodName",
dir: "asc"
}]
});
}
Post a Comment for "Custom Filtering With Multi-select Drop Downs"