I have a page with a grid containing data for different countries. The grid has a country column with a custom filter having countries as the data source for a treeview. The country column has a filterable ui that calls a function CreateCountrySelect. The page also has country tiles and it gives users the ability to toggle between countries and have the grid filtered by countries. When I select a country tile it toggles to the grid view and filters the data by the selected country with the treeview filter having the selected country checked by default. The data is filtering by country fine. The issue I am having is setting the checkboxes in the treeview filter to the selected country. The first time I click on the country filter the treeview has the selected country checked by default because it calls the function CreateCountrySelect. Since that function is only fired once the treeview filter always has the same selected country checked. How do I remove the previous checked country in the treeview and check the selected country when I change countries? I tried calling the CreateCountrySelect method in the country tile click event (goToEntityListView ) but that did not work.
function createCountrySelect(element) {
var grid = $scope.grid;
var filterMenu = grid.thead.find("th[data-field='country']").data("kendoFilterMenu");
var divElement = filterMenu.form.find("div.k-filter-help-text");
$("form").removeAttr("title");
vm.unflattedGeographicUnits = utilityLibrary.unflatten(vm.geographicUnits);
vm.geographicUnitList = [];
var selectGU;
for (var i = 0; i < vm.unflattedGeographicUnits.length; i++) {
selectGU = isGUSelected(vm.unflattedGeographicUnits[i].recordID);
if (sessionStorage["checkedFilterCountriesId"] != undefined && sessionStorage["checkedFilterCountriesId"].length > 0) {
var checkedfilters = JSON.parse(sessionStorage.getItem("checkedFilterCountriesId"));
if (checkedfilters != undefined && checkedfilters != null) {
for (var j = 0; j < checkedfilters.length; j++) {
if (checkedfilters[j] == vm.unflattedGeographicUnits[i].recordID)
selectGU = true;
}
}
}
var guItem = {
recordID: vm.unflattedGeographicUnits[i].recordID,
expanded: true,
text: vm.unflattedGeographicUnits[i].name,
name: vm.unflattedGeographicUnits[i].name,
checked: selectGU,
items: addChildItems(vm.unflattedGeographicUnits[i].items, selectGU)
};
vm.geographicUnitList.push(guItem);
}
vm.countryDS = new kendo.data.HierarchicalDataSource({
data: vm.geographicUnitList
});
vm.countryDS.sort({
field: "text", dir: "asc"
});
divElement.kendoTreeView({
name: 'countryFilter',
checkboxes: {
checkChildren: true,
template: '<input type="checkbox" name="#=item.name#" id="#=item.recordID#" #= item.checked ? "checked" : "" # />'
},
dataSource: vm.countryDS,
template: '<span title="#=item.text#">#=item.text#</span>',
dataTextField: "name",
check: function (e) {
vm.GUCountryIsDirty = true;
function serialize(data) {
for (var i = 0; i < data.length; i++) {
if (data[i].checked) {
$scope.checkedFilterCountries.push(data[i].text.trim());
if (data[i].RecordID != undefined)
$scope.checkedFilterCountriesId.push(data[i].RecordID);
else
$scope.checkedFilterCountriesId.push(data[i].recordID);
}
if (data[i].hasChildren) {
serialize(data[i].children.view());
}
}
}
$scope.checkedFilterCountries = [];
serialize(vm.countryDS.view());
var filter = {
logic: "or", filters: []
};
$.each($scope.checkedFilterCountries, function (i, v) {
filter.filters.push({
field: "countryGUList", operator: "contains", value: '[' + v.trim() + ']'
});
});
vm.dataSource.filter(filter);
var thFilter = grid.thead.find("th[data-field='country']")[0].children[0];
if ($scope.checkedFilterCountries.length > 0) {
thFilter.classList.add("k-state-active");
}
else {
thFilter.classList.removeClass("k-state-active");
}
}
});
$timeout(function () {
filterMenu.form.find("span[role='listbox']").css("display", "none");
filterMenu.form.find("input[title='Value']").css("display", "none");
filterMenu.form.find(".k-button").css("display", "none");
}, 0);
}
------------------------
$scope.goToEntityListView = function (country) {
selectedCountry = country;
vm.selectedCountryID = selectedCountry.geographicUnitRecordID;
vm.planSearch = "";
vm.isTileView = false;
vm.fromTileView = true;
sessionStorage.removeItem("selectedCountryName");
vm.selectedCountryName = selectedCountry.name;
var filter = { logic: "or", filters: [] };
$scope.checkedFilterCountries = [];
$scope.checkedFilterCountries.push(selectedCountry.countryName);
filter.filters.push({ field: "countryGUList", operator: "contains", value: '[' + selectedCountry.countryName.trim() + ']' });
var grid = $scope.grid;
grid.dataSource.filter(filter);
kendoUtilitiesService.refreshGridData(grid, vm.planData);
var thFilter = grid.thead.find("th[data-field='country']")[0].children[0];
if ($scope.checkedFilterCountries.length > 0) {
thFilter.classList.add("k-state-active");
}
else {
thFilter.classList.removeClass("k-state-active");
}
}
Hello, Yen,
In general, when you wish to modify the FilterMenu, the columns.filterable.ui configuration must be used as it also establish the data-binding relation between the input and the filter.
However, it is important to keep in mind that the filter menu is designed to work with single values.
Dojo
https://dojo.telerik.com/@gdenchev/IXoXEVOD (City column)
If you want to have the more complex logic with multiple selections, then my advice would be to create some external UI (maybe a popup or something similar) which holds the DropDownTree and applies the filter. This way you won't have to create a binding between the DropDownTree and Grid filter and you'll eliminate the probability of having many other issues.
Best Regards,
Georgi