Реализация активной фильтрации в пользовательском интерфейсе Kendo Grid jQuery для Dist ⇐ Jquery

[Anonymous]

Текущее поведение: в настоящее время, хотя наши отфильтрованные результаты отображаются на основе фильтра каждого столбца, активные фильтры по-прежнему отображают весь список элементов в этом столбце, независимо от того, были ли они отфильтрованы. Мы стремимся реализовать активную фильтрацию, аналогичную Excel, где раскрывающийся список ограничен фильтрами, применяемыми в других столбцах.
**Проблема: **
Как я могу изменить код Kendo, чтобы гарантировать, что фильтр столбца DeptName отображает только отдельные значения на основе текущих данных сетки с учетом всех примененных фильтров в других столбцах, аналогично функции активной фильтрации Excel?
Ниже приведен код:
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: "   ",
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: "",
headerTemplate: "",
headerAttributes: {
"class": "grid-header check-header"
},
attributes: {
"class": "checkbox-cell",
},
template: "",
},
{
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");
}

Я попробовал получить это событие. Но это не работает
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();
}
}
},


Подробнее здесь: https://stackoverflow.com/questions/784 ... y-for-dist