I'm using template binding to display a list of users.   For each user, we have a yes/no radio button and a drop down.  The options available in the drop down are dependent on the radio button.  If the user picks "yes" in the radio, we give them 4 options in the drop down, if they select no, we give them 2 options.

I created a view model that contains an array of users and for each user I have an array of the available options for the drop down. 

ex. viewModel= [{UserId: 1, RBValue: true, DropDownId: 3, DropDownOpts: [1,2,3,4]}, {UserId: 2, RBValue: false, DropDownId:1, DropDownOpts: [1,2]};

And then in my template I have a select  as such:

<select source: DropDownOpts, value: DropDownId"></select

When the radio is updated, I modify the DropDOwnOpts for that item.   

When the page loads, it works fine.   The appropriate options appear in the dropdown list, but when I modify the DropDownOpts in the viewmodel, I can see the update in the console, but the options do not change.

Am I missing something obvious here?  Or is this not possible (I'm sure I can do it via js, but would rather not).

Thanks for any help.

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.