Filter Multi Checkboxes Based on Previous Filters in Grid

Environment

Product	Progress® Kendo UI® Grid for jQuery
Product Version	Updated with the 2021.3.914 version

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.

EditPreviewOpen In Dojo

<script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
<div id="example">
    <div id="grid"></div>
      <script>
        $(document).ready(function() {

          function removeDuplicates(items, field) {
            if(field.indexOf(".") > 0){
              field = field.substring(0, field.indexOf("."));
            }
            var getter = function(item){return item[field]},
                result = [],
                index = 0,
                seen = {};

            while (index < items.length) {
              var item = items[index++],
                  text = getter(item);
              if(field === "Category"){
                text = text.CategoryName;
              }

              if(text !== undefined && text !== null && !seen.hasOwnProperty(text)){
                result.push(item);
                seen[text] = true;
              }
            }

            return result;
          }

          var filterSource = new kendo.data.DataSource({
            data: products
          });

          $("#grid").kendoGrid({
            dataSource: {
              data: products,
              schema: {
                model: {
                  fields: {
                    ProductName: { type: "string"},
                    UnitPrice: { type: "number" },
                    UnitsInStock: { type: "number" },
                    Discontinued: { type: "boolean" },
                    Category: {
                      defaultValue: {
                        CategoryID: 0,
                        CategoryName: ""
                      }
                    },
                  }
                }
              },
              pageSize: 20,
              change: function(e) {
                filterSource.data(e.items);
              },
            },
            height: 550,
            scrollable: true,
            sortable: true,
            pageable: {
              input: true,
              numeric: false
            },
            filterable: true,
            filterMenuInit: function (e){
              var grid = e.sender;
              e.container.data("kendoPopup").bind("open", function() {

                filterSource.sort({field: e.field, dir: "asc"});


                var filter = e.sender.dataSource.filter();

                var query = new kendo.data.Query(grid.dataSource.data());
                                var data = query.filter(filter).data;

                var uniqueDsResult = removeDuplicates(data, e.field);


                filterSource.data(uniqueDsResult);


              })
            },
            columns: [
              {
                field: "Category.CategoryName",               
                title: "Category",             
                filterable: { multi: true, search: true, required: true, dataSource: filterSource },
              },
              {field: "ProductName", filterable: {
                multi: true,
                dataSource: filterSource
              }
              },
              { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px",filterable: {
                multi: true,
                dataSource: filterSource
              } },
              { field: "UnitsInStock", title: "Units In Stock", width: "130px",filterable: {
                multi: true,
                dataSource: filterSource
              } },
              { field: "Discontinued", width: "130px"}
            ]
          });
        });
      </script>
</div>