Remote options in filtering dropdown

By default and in most cases, options in filter dropdown for range, equal or some custom condition are filled from local data cache of the grid. However in few cases it may be required to fetch the options remotely via Ajax call. Fetching the filter dropdown options remotely has nothing to do with local or remote filtering in the host grid so it can be used in either case.

Since filter dropdown is just a thin wrapper around pqgrid, we can leverage its remote data loading capability by updating dataModel of pqgrid initialization object to load data from « Customers » inside column.filter.selectGridObj callback as shown for Customer Name column in this example.

selectGridObj: function (ui) {
    //update dataModel of pqgrid initialization object ( ui.obj ) to load options remotely
    ui.obj.dataModel = {
        location: 'remote',
        url: '/pro/customers/names',
        getData: function (response) {
            var val = ui.column.filter.crules[0].value || [],
                di = ui.column.dataIndx,
                data = response.data;
            data.forEach(function (rd) {
                if (val.indexOf(rd[di]) >= 0) {
                    //select the checkbox.
                    rd.selected = true;
                }
            })
            return { data: data };
        }
    }
}