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");
            }
        }

I have a number that I need to display on the screen in the user's number format. The number can be of any length and have any number of decimals. I need the commas or periods to be displayed between the thousands and decimals as appropriate. For example:
123456789.12345 should display as 123,456,789.12345 in en-US

123456789.12345 should display as 123.456.789,12345 in de-DE

1234 should be 1,234 and 1.234 respectively. 

123.16 should be 123.16 and 123,16 respectively.

When I use kendo.toString(1234.165, "n") I get 1,234.17 which is not what I want. I want it to be 1,234.165

Is there a way to make the Editor toolbar buttons smaller? I'd like them to be small Bootstrap buttons.

I would like to disable partly multiselect dropdown li elements on basis of specific condition. To achieve this I tried to set data attributes on li elements  and check that data while rendering these li elements and apply CSS to disable it. But neither I find any related data in data object returned by KendoMultiselect nor in documentation.

$(itemIdservicetypes).on('change', function (e) {
			// Here we can get the value of selected item
			var seletctedValueST = $(itemIdservicetypes).data("kendoDropDownList").text();
			var data = $(itemIdSIMultiSelect).data("kendoMultiSelect");

			data.ul.children().each(function () {
				if (seletctedValueST == $(this).data("ServiceType") {
					$(this).addClass("k-disabled");
				} else {
					$(this).removeClass("k-disabled");
				}
			})

		});

i tried multi-column headers for 2 days with this version, but i couldnt.

the code i made was like..

$("#grid").kendoGrid({

       columns: [

              {field: "first row", title: "first row", headerAttributes: { **************},

                     columns: [

                            {field: "multi column row", title: "multi column row", headerAttributes: { **************} }

                            ,{field: "multi column row2", title: "multi column row2", headerAttributes: { **************} } 

                     ]

       ]

this code doesnt make multi-column, any error log either.

is that version problem? 

The new dateInput functionality added to the kendoDateTimePicker only deals with format.  It does provide true mask behavior similar to the MaskedTextBox control.

I want our users to be able to type 03012023 and the mask would convert it to 03/03/2023 automatically.

Is there any way to enable/incorporate this modern UI behavior into the kendoDateTimePicker?  The current implementation generating a lot of complaints from users.

Hai,

I am facing issue with my editor.

1) Want to disable the editor while still being able to use the PDF and print function.

2) How to set mode as landscape and set name of file (.pdf) when I click "save as PDF".

3) When I click "print", my style doesn't display.

Please refer to the attached file, which is in .jsx format.

Hi,

There is an existing issue with File Manger pagination in List Mode (Grid Mode works fine).

The issue is that the paginator does not get updated with total count of items in the folder just opened/expanded.  The count remains the same as first/home page.

E.g.  On home page of file manager, I have 5 items ( 3 folders, 2 files)... so pager widget reads "1 - 5  of 5 items".

Once I click on a folder (one of the 5 items), it opens to show 50 (of 25000) files.  However, the paginator widget stays at "1 -5 of 5 items".   Thus leaving the user screwed because there are no pager links to get to next page of items as it thinks it has only 5 items in view when there are actually 50 in view, and it thinks total items are 5 instead of 25,000.

If I switch to Grid mode, it all works perfectly.  Both my list and grid views are configured exactly the same.

,
                                views: { 
                                list: {
                                    pageable: {
                                        alwaysVisible: true,
                                        pageSizes: [10, 20, 50, 100, 200, 300, 500, 1000]
                                    },
                                    pageable: true,
                                    selectable: "single" //allows only single selection int the ListView
                                },
                                grid: {
                                    pageable: {
                                        alwaysVisible: true,
                                        pageSizes: [10, 20, 50, 100, 200, 300, 500, 1000]
                                    },
                                    pageable: true,
                                    selectable: "single" //allows only single selection int the ListView
                                }

So an obvious bug...but when will there be a fix?  Or a workaround? Currently I am working on rolling my own here.  I have to trap the "open" event (double click)...and the  reset the datasource with the correct items for the folder clicked on, and update the datasurce totals...then it works fine...but i have lost context of parent folders by resetting the data source with items at folder level.

The way it is currently, list mode is useless in FileManager...unless your sub folders have less items than your root folder.