Current Behavior: Currently, although our filtered results are displayed based on each column’s filter, the active filters still show the entire list of items in that column, regardless of whether they have been filtered out. We aim to implement active filtering similar to Excel, where the drop-down list is constrained by the filters applied in other columns.
**Problem: **
How can I modify the Kendo code to ensure that the DeptName column filter displays only distinct values based on the current grid data, taking into account all applied filters in other columns, similar to Excel’s active filtering feature?
Following is the code:

function BindGrid() {
    var grid = new kendo.data.DataSource({
        transport: {
            read: function (options) {
                $.ajax({
                    type: "GET",
                    url: "Spartan2PHQDataGrid.aspx/GetPHQGridData",
                    data: "",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        options.success(JSON.parse(response.d));
                    }
                });
            }
        },
        schema: {
            model: {
                fields: {
                    //Format: { editable: true},
                    //AdType: { editable: true},
                    //ShortDescription: { editable: true},
                    //PrintQty: { editable: true},
                }
            }
        },
        pageSize: 10,
    });

    kGrid = $("#Grid").kendoGrid({
        toolbar: "<input type='button' class='k-button' onclick='SaveClicked(this)' value='Save'/>   <input type='button' class='k-button' onclick='refreshGrid()'  value='Cancel'/>",
        dataSource: grid,
        scrollable: true,
        filterable: {
            extra: false,
            operators: {
                string: {
                    startswith: "Starts with",
                    eq: "Is equal to",
                    neq: "Is not equal to"
                }
            }
        },
        sortable: true,
        resizable: true,
        reorderable: true,
        pageable: {
            alwaysVisible: true,
            pageSizes: [10, 20, 50, 100]
        },
        editable: true,
        columns: [
            {
                field: "Id", title: "Id", hidden: true,
                headerAttributes: {
                    "class": "grid-header"
                }
            },
            {
                title: "select_all", width: "70px",
                //headerTemplate: "<input type="checkbox" id="chkAll" />",
                headerTemplate: "<input type='checkbox' id='header-chb' onclick='checkAllClick($(this))' class='k-checkbox header-checkbox'>",
                headerAttributes: {
                    "class": "grid-header check-header"
                },
                attributes: {
                    "class": "checkbox-cell",
                },
                template: "<input type="checkbox" class="row-checkbox" />",                
            },
            {
                field: "DeptName", title: "Dept", width: "100px", filterable: true, editable: true,
                headerAttributes: {
                    "class": "grid-header"
                }, filterable: {
                    multi: true,
                    search: true
                }
            },
            {
                field: "UPC", title: "UPC", width: "120px", filterable: true, editable: true,
                headerAttributes: {
                    "class": "grid-header"
                }
            },
            {
                field: "BrandName", title: "Brand", width: "120px", filterable: true, editable: true,
                headerAttributes: {
                    "class": "grid-header"
                }
            },
            {
                field: "ShortDescription", title: "Description", width: "180px", editable: false,
                headerAttributes: {
                    "class": "grid-header"
                }
            },
            {
                field: "Headline", title: "Headliner", width: "150px", editable: false,
                headerAttributes: {
                    "class": "grid-header"
                }
            },
            {
                field: "AdStartDate", title: "Effective Date", width: "140px", editable: true,
                headerAttributes: {
                    "class": "grid-header"
                }, format: "{0: MM/dd/yyyy}", type: "date",
                filterable: {
                    ui: "datetimepicker"
                },
            },
            {
                field: "Format", title: "Format", width: "110px", filterable: true, editable: false,
                headerAttributes: {
                    "class": "grid-header"
                }, filterable: {
                    multi: true,
                    search: true
                }
            },
            {
                field: "PrintQty", title: "Qty", width: "80px", editable: false,
                headerAttributes: {
                    "class": "grid-header"
                }
            },
            {
                field: "AdType", title: "AdType", width: "100px", filterable: true, editable: false,
                headerAttributes: {
                    "class": "grid-header"
                }
            },
            {
                field: "SaleType", title: "Sale Type", width: "100px", filterable: true, editable: false,
                headerAttributes: {
                    "class": "grid-header"
                }
            },            
        ]                       
    }).data("kendoGrid");
}

I tried this event to fetch. But that’s not working

filterMenuInit: function (e) {
    var filteredDeptNames = getFilteredDeptNames(this);
    var filterMenu = e.container.find("[data-field='DeptName'] .k-filter-menu");
    if (filterMenu.length > 0) {
        var dropdownlist = filterMenu.data("kendoDropDownList");
        if (dropdownlist) {
            dropdownlist.dataSource.data(filteredDeptNames);
            dropdownlist.refresh();
        }
    }
},