I am expanding and collapsing groups of columns on a button click leveraging an inline headertemplate  like this example in a kendo UI grid. The table is complex with 4 core column groups, with each column groups expanding/contracting 12 columns.

I have this working functionally BUT

1. Whenever the + or the - button icons are clicked the CPU reaches 100% as a forced reflow occurs as Kendo and Jquery together in concert recalculate the style. See attached screenshot with performance profile. Is there any way to prevent this recalculation that is super expensive and and CPU intensive as It significantly downgrades the user experience. 
2. When the - icon is clicked  the header group column disappears. This appears to be a bug in show/hide column logic. I have worked around this by forcing a show on the element using a jQuery selector. Is this a known bug when there are a large number of grouped columns ? What might I be doing wrong ?

$("th[data-title=" + column_header + "]").show();

I would love a second pair of eyes on this code  groups/ungroups columns based on button click

function onExpClick(button, db_column_names, column_header) {
    
    var span = $(button).find("span");
    var grid = $("#grid").data("kendoGrid");

    if (span.hasClass("k-i-minus")) {

        span.removeClass("k-i-minus");
        span.addClass("k-i-plus");

        db_column_names.forEach(function(column_name){            
            grid.hideColumn(column_name.concat("_rec"));
            grid.hideColumn(column_name.concat ("_action"));
            grid.hideColumn(column_name.concat ( "_notes"));
        });

        $("th[data-title=" + column_header + "]").show();

    } else {

        span.removeClass("k-i-plus");
        span.addClass("k-i-minus");

        db_column_names.forEach(function(column_name){            
            grid.showColumn(column_name.concat("_rec"));
            grid.showColumn(column_name.concat ("_action"));
            grid.showColumn(column_name.concat ("_notes"));
        });


    }    
};

Thank You,

Rohit

The title says it all

How to get the data item from the node in the select event?

Hello,

In the TileLayout DEMO (https://demos.telerik.com/kendo-ui/tilelayout/index, script tags are used in the html code.
We want to create the script tag with the javascript code.

For example in the demo page is written:
<script id="views-chart-template" type="text/x-kendo-template"> <div id="views-chart" style="height:100%; width:100%"></div> </script>

When replacing this html code by the JS code :
<script>
     var s = document.createElement('script');
      s.id = "visitors-chart-template";
      s.setAttribute('type', "text/x-kendo-template");
  
      var d = document.createElement('div');
      d.id = "visitors-chart";
      d.style = "height:100%; width:100%";
      s.appendChild(d);
        
      document.getElementById("example").appendChild(s);
</script>

Then this works in Chrome and Microsoft Edge, but not in Firefox.

The HTML page is added in the appendix. When opening this in Firefox, you will see that the "Visitors" dashboard card content is not filled in. When opening this HTML page with Chrome, then the "Visitors" dashboard is okay.

Thanks in advance.

According to here: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.filterable.ui

You can (for example) replace a filter input with a textarea, however, the example as shown doesn't work because it's not bound to the filter value.

It will work if you add the data-bind attribute:

$(element).replaceWith("<textarea data-bind='value:filters[0].value'></textarea>");

Now the filter value actually gets passed to the server and populated when you call setOptions on the grid.

As there is no easy way to provide your own filter template, I'm trying to create a complex filter (a checkbox list for a flags enum) using replaceWith.

I have some checkboxes and use some JavaScript to set the value of an input that is bound using the data-bind attribute.

This all works fine and the filter value is passed to the backend as expected, and the input value is populated via setOptions when I reload.

For example:

$("#grid").kendoGrid({
    columns: [ {
        field: "flags",
        filterable: {
            ui: "testFilter"
        }
    } ],
    filterable: true,
    //...
});


function testFilter(e) {
    $(e).replaceWith(`
    <input type='checkbox' value='1' onclick='setFilterInput(this);' />
    <input type='checkbox' value='2' onclick='setFilterInput(this);' />
    <input type='checkbox' value='4' onclick='setFilterInput(this);' />
    <input type='checkbox' value='8' onclick='setFilterInput(this);' />
    <input id='filterInput' type='text' data-bind='value:filters[0].value' />
    `);
}

function setFilterInput(e) {
    var x = $(e).val();
    var c = $(e).is(":checked");
    var input = $("#filterInput");
    var val = parseInt(input.val(), 10);

    if (val === NaN) {
        val = 0;
    }

    input.val(c ? val | x : val ^ x);
    input.trigger("change");
}

The problem is that I need to know the current filter value when the testFilter function is called, so I can check the correct checkboxes when the grid is loaded. For example, this shows an empty value, even when the filter is already set:

function testFilter(e) {
    console.log("the current filter value is", $(e).val());
}

I can't get the value of the filter input because it's bound after the testFilter function is called.

How can I access filters[0].value from inside the testFilter UI function?

Preferably without having to go top-down via $("#grid").data("kendoGrid") etc.

Hi,

How can i render a kendo datepicker inside a kendo script template? With the help of javascript?

here is a simple sample: 

<script id="user-template" type="text/x-kendo-template">
<div id="column">
      <input id="datePicker1" />
</div>
</script>

I have a grid that I'm trying to enable inline editing.  Whenever I attempt to update a row error is thrown in the console.  I've tried moving the editor into a separate editor with no luck.  I removed the configuration column so there was just the Room displayName and the same thing happens so it is not an issue with the Multi-Select.

I am currently using Kendo UI v2021.1.330

In Chrome the error happens when the edit control loses focus and is

kendo.all.js:6566 Uncaught TypeError: Cannot read properties of undefined (reading 'data')
    at init.setup (kendo.all.js:6566:106)
    at init.create (kendo.all.js:6540:34)
    at Object.<anonymous> (kendo.all.js:7640:42)
    at Function.Deferred (jquery.min.js:2:29289)
    at init._promise (kendo.all.js:7637:26)
    at init._send (kendo.all.js:7663:44)
    at init.sync (kendo.all.js:7395:60)
    at init._change (kendo.all.js:8041:26)
    at init.d (jquery.min.js:2:3873)
    at init.trigger (kendo.all.js:164:37)

In Firefox the error happens when clicking update and is

function generateTemplate(configs) :string{

    var arryDisplayNames = configs.map(function (a) { return a.displayName; });
    var result = arryDisplayNames.join(", ");

    return result;
}

let configurationDataSource = new kendo.data.DataSource({
    serverFiltering: true,
    transport: {
        read: {
            url: '/api/config',
            data: function (opt) {

                return {
                    roomId: 0
                }

            }
        },
        

    },
    schema: {
        model: {
            id: "id",
            fields: {
                //id: { type: "number" },
                displayName: { type: "string"}
            }
        }
    }
})
let gridDataSource: kendo.data.DataSource = new kendo.data.DataSource({
        autoSync: true,
        transport: {
            read: {
                url: '/api/rooms/',
                type: 'get',
                dataType: 'json',
                data: {
                    buildingid: roomBuildingId
                }
            },
            update: {
                url: '/api/rooms/',
                type: 'post',
                dataType: 'json'

            }
        },
        schema: {
            model: {
                id: "RoomId",
                fields: {
                    roomId: { type: 'number' },
                    buildingId: { type: 'number' },
                    displayName: { type: 'string' },
                    restricted: { type: 'boolean' },
                    isActive: { type: 'boolean' },
                    configurations: { type: 'object' },
                    owners: { type: 'object' },
                }
            }
        }
    });

    let gridColumns: kendo.ui.GridColumn[] = [

        { field: "displayName", title: "Room" },
        {
            field: "configurations",
            title: "Configurations",
            editor: function (container,options) {
                
                var input = $("<input name='Configurations' id='Configurations' >");

                // append to the editor container
                input.appendTo(container);

                // initialize a multiselect
                input.kendoMultiSelect({
                    dataTextField: "displayName",
                    dataValueField: "id",
                    dataSource: configurationDataSource // bind it to the brands array
                }).appendTo(container);
                
            },
            template: "#= generateTemplate(configurations) #"
        },
        { command: ["edit"], title: "&nbsp;"}
    ];


    roomGrid = $('#rooms').kendoGrid({
        dataSource: gridDataSource,
        sortable: true,
        groupable: true,
        pageable: false,
        editable: "inline",
        selectable: "row",
        columns: gridColumns

    }).data('kendoGrid') as kendo.ui.Grid

Hi!

When spreadsheet has may sheets and sheet bar has scroll buttons there is a problem with enter formula with link to sheet if tab of target sheet is not visible. Scrolling scrollbar stops editing mode.

To reproduce this, open dojo:

https://dojo.telerik.com/ETOsIzUP

then press "=" key (to open edit formula mode),

then press scroll right button on sheets bar (to open last sheet)

- editor mode stops and "A1" cell containts "=" char.


What is expected: possibility select any sheet in workbook to use in formula.

Kendo UI Spreadsheet 2022.1.119

Hi Support

Back in 2016, I asked the same question: https://www.telerik.com/forums/grid-setoptions-error-custom-commands-should-have-name-specified (but must have solvedtheissueanotherway).

Now, I have the same requirement (to persist the state of a grid: https://demos.telerik.com/kendo-ui/grid/persist-state)

Using Kendo UI v2021.3.1216, I still get the same error when I call grid.setOptions: "Custom commands should have name specified".

I have changed the "Persist state" grid demo (https://demos.telerik.com/kendo-ui/grid/persist-state) by just adding the following code to the grid setup:

toolbar: [
  { template: kendo.template($("#toolbar-template").html()) }
],

The toolbar template is simply:

    <script id="toolbar-template" type="text/x-kendo-template">
        x
    </script>

The dojo: https://dojo.telerik.com/@mortenma71/EgoYILeS/2

It seems that the persisting grid state with a toolbar template is not possible. The saved options has an empty toolbar (see screenshot)

Could you help?

Thanks.

/Morten

Hello guys, I hope you are all well.

I have a question about the KendoUI version 2014.1.416 as I am facing some issues with the kendoSortable() function.

At the moment, the jQuery version is the latest (3.6.0) and I have also placed the latest jQuery Migrate version (3.2.2) but the .data("kendoGrid") function always returns an "undefined" result, meaning that it does not find the actual grid.

Do you happen to know whether the problem is the latest jQuery version or the syntax to get the kendoGrid?

Below I have placed the JS line of code to fetch the grid.

- code sample: var grid = e.detailRow.find(".js-filter-conditions-grid").data("kendoGrid");

Regards,

R