Hai,

I have two questions : 

1) How can I change the width of a GridColumn, as show below? I am currently using GridColumn. Please find attached as reference.

2) How can I use Kendo UI to create a bar graph like the one shown below? The graph should update based on the user-entered values for total occurrence and time period (week/month). Does Kendo UI support this functionality?

Hi,

I want to hide the date row in the scheduler when grouping is used. How can I achieve this?

Extension of below question  

For reference link bellow: https://www.telerik.com/forums/how-to-set-data-attribute-for-multiselect-dropdown-li-element#5647546

Hello everyone,

I am trying my hands at the Heatmap chart. I like what it does and have mostly managed to customize it the way I want.

However, I was wondering if there is a way to assign colors to the cells similar to how you can do 3 color scale conditional formatting in Excel.

For example, for the given set of values, the max value is shown with green marker color, the min in red, the median value in yellow.

And then all other values follow a gradient between these 3 primary colors based on what the value is.

The heatmap already does a gradient of color, and changes the shade from dark to light as the value goes down, but it does this in just one color, depending on which theme you chose. 

If it helps, I have attached a sample from excel.

Thank you.

Alok.

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