Filter Multi Checkboxes Based on Previous Filters in Grid

Environment

Description

How can I display only the valid possibilities in the multi-checkbox filter based on the previously applied filters in the Kendo UI Grid?

Solution

Use an external Kendo UI dataSource and assign it both to the Grid and the filters.

<div id="example">
    <div id="client"></div>
    <script>
        $(document).ready(function() {
            var telerikWebServiceBase = "https://demos.telerik.com/kendo-ui/service/";
            var dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: telerikWebServiceBase + "/Products",
                        dataType: "jsonp"
                    },
                    update: {
                        url: telerikWebServiceBase + "/Products/Update",
                        dataType: "jsonp"
                    },
                    destroy: {
                        url: telerikWebServiceBase + "/Products/Destroy",
                        dataType: "jsonp"
                    },
                    create: {
                        url: telerikWebServiceBase + "/Products/Create",
                        dataType: "jsonp"
                    },
                    parameterMap: function(options, operation) {
                        if (operation !== "read" && options.models) {
                            return {
                                models: kendo.stringify(options.models)
                            };
                        }
                    }
                },
                batch: true,
                pageSize: 20,
                schema: {
                    model: {
                        id: "ProductID",
                        fields: {
                            ProductID: {
                                editable: false,
                                nullable: true
                            },
                            ProductName: {
                                validation: {
                                    required: true
                                }
                            },
                            UnitPrice: {
                                type: "number",
                                validation: {
                                    required: true,
                                    min: 1
                                }
                            },
                            Discontinued: {
                                type: "boolean"
                            },
                            UnitsInStock: {
                                type: "number",
                                validation: {
                                    min: 0,
                                    required: true
                                }
                            }
                        }
                    }
                }
            });


            $("#client").kendoGrid({
                dataSource: dataSource,
                filterable: true,
                pageable: true,
                height: 550,
                toolbar: ["create", "save", "cancel"],
                columns: [{
                        field: "ProductName",
                        filterable: {
                            multi: true,
                            search: true,
                            dataSource: dataSource
                        }
                    },
                    {
                        field: "UnitPrice",
                        title: "Unit Price",
                        format: "{0:c}",
                        width: 120,
                        filterable: {
                            multi: true,
                            dataSource: dataSource
                        }
                    },
                    {
                        field: "UnitsInStock",
                        title: "Units In Stock",
                        width: 120,
                        filterable: {
                            multi: true,
                            dataSource: dataSource
                        }
                    },
                    {
                        field: "Discontinued",
                        width: 120,
                        filterable: {
                            multi: true,
                            dataSource: [{
                                Discontinued: true
                            }, {
                                Discontinued: false
                            }]
                        }
                    },
                    {
                        command: "destroy",
                        title: "&nbsp;",
                        width: 150
                    }
                ],
                editable: true
            });
        });
    </script>
</div>