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?

Answer 1

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.

Answer 2

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.