Hi,
I have implemented header filters in the manner described here:
https://paramquery.com/pro/demos/filter_remote_optionsThe page correctly calls the server to obtain the list of filter options each time the filter list is displayed.
I now need to make the filter lists cascade.
To be able to do that I need to send the state of all the header filters on the page with each call to the obtain the current filter's filter options.
However, there doesn't seem to be a way to reference the other columns to obtain their currently selected filter option from within the selectGridObj function.
This is presumably because the full grid hasn't been created at that point.
How might I implement cascading remote header filters?
Cheers,
Geoff
Code snippet to show what I am trying to achieve:
obj.colModel =
[
{
title: "Business Unit",
dataIndx: "BusinessUnit",
editable: false,
width: 70,
filter: {
type: 'select',
crules: [{ condition: 'range' }],
valueIndx: "BusinessUnit",
labelIndx: "BusinessUnitName",
gridOptions: {
filterModel: { header: false }
},
selectGridObj: function (ui) {
buildFilterDropDown(ui, "/theControllerUrl");
}
},
filterFn: function (ui) {
if (ui.condition == 'range') {
return {
maxCheck: 1
}
}
}
},
...
]
...
function buildFilterDropDown(ui, strControllerUrl) {
var strDataIndx = ui.column.dataIndx;
var oData = { [strDataIndx]: ui.obj.dataModel.data[0][strDataIndx] || "" }; //Can only access the current column here. Need to send state of all other header filters too.
ui.obj.dataModel = {
location: "remote",
getUrl: function () {
return { url: strControllerUrl, data: oData };
},
getData: function (response) {
var val = ui.column.filter.crules[0].value || [];
var strDataIndx = ui.column.dataIndx;
response.forEach(function (oOption) {
if (val.indexOf(oOption[strDataIndx]) >= 0) {
oOption.selected = true;
}
})
return { data: response };
}
}
}