How to "Filter a Kendo Grid data on serverSide with multi checkbox filter that has some default selections made"

Question

I am trying to create a multi checkbox filter on a column of the kendo grid with serversidefiltering set to true. In the multiselect-checkbox filter, I want to default the selection to some value. I am trying to achieve these 2 scenarios given below:

1) I would still want the multiSelect filter to show me all the values for that field and only have the default selections checked.

2) Also, have the data on the grid column filtered down to the checkbox checked in the multi-checkbox filter.

I have tried the following and I am mostly getting close to achieving either 1) or 2). But I am trying to get both of them working together.

Here's a link to the demo for 1)

With the above, I could get to only have the default checkbox checked, but the grid data on load does not show the filtered data, it shows everything.

For 2) I tried the following

Filter: [{
           field: "ProductName", operator: "eq", value: "Chai"
}],

This above code filters the data on the grid correctly, but For the menu filter, the checkbox list is also narrowed down to contain only the list of filtered items sent by the server. (looking for a solution to narrow down the data in grid, but show all options in the checkbox filter).

Is there a way I could get both these requirements work together on a multi-checkbox filter with ServerSide filtering?

Any idea to resolve this issue is highly appreciated.

Thank you in advance!

Answer 1

When serverPaging of the Grid is enabled, dataSource should be provided for all the Filterable Multi Check widgets. It means, that you will have to implement method at your server which will return list of items to be displayed in filter.

columns: [
{
    field: "FirstName",
    filterable: {
        multi: true,
        //when serverPaging of the Grid is enabled, dataSource should be provided for all the Filterable Multi Check widgets
        dataSource: {
            transport: {
                read: {
                    url: telerikWebServiceBase + "Employees/Unique",
                    dataType: "jsonp",
                    data: {
                        field: "FirstName"
                    }
                }
            }
        }
    },
},

Here is a working demo.

Here is a link to Telerik's demo.