Cascading remote header filters

[brwncald]

Hi,

I have implemented header filters in the manner described here:
https://paramquery.com/pro/demos/filter_remote_options
The 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:

Code: [Select]

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


[paramvir]

selectGridObj is callled on demand i.e., when the filter dropdown opens.

Reference to the host grid inside the callback can be obtained from "this", so columns can be get from this.getColModel() which is an array that can be iterated to read filters of individual columns.

Code: [Select]

this.getColModel().forEach(function(column){
  var filter = column.filter; //filter of column.
  if( filter ){
    var crules = filter.crules;
  }
});


[brwncald]

That helps.
As you suggested I was able to get access the other columns by doing this:

Code: [Select]

                    selectGridObj: function (ui) {
                        buildFilterDropDown(ui, "/theControllerUrl", this.getColModel());
                    }
Filters cascade nicely now.
Cheers,
Geoff