What is the correct syntax to change options on an existing Kendo Grid?

Question

I've got a Kendo Grid:

$('#myGrid').kendoGrid({
    ...
    scrollable: false,
    ...
});

and then later on I want to change its scrollable property. I've tried all of the following:

$('#myGrid').data("kendoGrid").options.scrollable = true;
$('#myGrid').data("kendoGrid").refresh();

-

$('#myGrid').data("kendoGrid").scrollable = true;
$('#myGrid').data("kendoGrid").refresh();

-

var MyGrid = $('#myGrid').data("kendoGrid");
MyGrid.options.scrollable = true;
MyGrid.refresh();

-

var MyGrid = $('#myGrid').data("kendoGrid");
MyGrid.scrollable = true;
MyGrid.refresh();

Nothing works. How does one change whether a grid is scrollable on the fly?

Lars Höppner · Accepted Answer · 2013-10-16T20:18:58.677

5

This is not supported out of the box, so you'd have to mess with the internals. It's probably easier to just recreate the grid, but if you still think you need it, this fiddle might help point you in the right direction:

http://jsfiddle.net/lhoeppner/AKzzL/

Basically you could try using something like this:

function enableScrolling() {
    if (!grid.options.scrollable) {
        grid.options.scrollable = true;
        grid._thead();
        grid.refresh();
    }
}

function disableScrolling() {
    grid.options.scrollable = false;
    grid.table.unwrap(); // manually remove the wrapper that enables scrolling
}

Making a scrollable grid non-scrollable like that results in the data columns to have the wrong width though, so depending on your requirements, you may need to customize this some more.

edited Oct 16 '13 at 20:18

answered Oct 16 '13 at 19:59

Lars Höppner

18,252
2
45
73

Ended up just recreating the whole thing. It's worth noting that you may need to actively [destroy the grid](http://stackoverflow.com/questions/15618467/kendogrid-destroy-and-recreate-the-table-on-a-new-datasource-why-do-the-old-t) before recreating it. -- Also, the height property doesn't go away when you destroy it, (even if it was set with the grid properties) so if you're recreating a scrollable grid as a non-scrollable grid, you need to call $('#myGrid').css('height', ''); – Zook Oct 17 '13 at 18:18
Good to know, thanks. It's possible Telerik will at one point implement .setOptions for the grid (they have it for some of their widgets) in order to make this easier. Considering the importance of SPAs nowadays, it would seem like a good idea, but of course they have limited resources. – Lars Höppner Oct 17 '13 at 18:35

Petur Subev · Answer 2 · 2015-01-06T08:07:27.773

4

Options of the Grid cannot be changed dynamically. You need to re-create the whole Grid with different options in order to disable/enable them dynamically.

EDIT As from Q3 2014, the Grid supports the setOptions method, which does pretty much the same internally, but keeps most of the options and the state of the dataSource in sync.

edited Jan 06 '15 at 08:07

answered Oct 16 '13 at 20:06

Petur Subev

19,983
3
52
68

score 0 · Answer 3 · answered Nov 20 '15 at 07:46

0

var MyGrid = $('#myGrid').data("kendoGrid");
MyGrid.options.scrollable = true;

(base on my experience) Then you need to reload the dataSource ex:

MyGrid.setDataSource(kendoDataSource);

answered Nov 20 '15 at 07:46

dr.Crow

1,493
14
17

What is the correct syntax to change options on an existing Kendo Grid?

3 Answers3