Accessing grid object via MVVM

[Igor]

Hello, 

Is there a better way to get the grid object? Is there MVVM best practice to this approach?

 

HTML:

<div id="model">
    <input type="button" value="ClickMe" data-bind="events:{click: onClick}">
    <div id="grid" data-role="grid" data-bind="source: gridDS" data-columns="[
    { field: 'Creatives_id', title:'ID'},
    { field: 'Email', title: 'User' },
    { field: 'State' }]"></div>
</div>

 

JavaScript

var model = kendo.observable({
    onClick: function(e) {
        var grid = $("#grid").data("kendoGrid");

        grid.select().each(function(e) {
            var dataItem = grid.dataItem(this);
            dataItem.State = 1;
            dataItem.dirty = true;
        });

        grid.refresh();
    },
    gridDS: new kendo.data.DataSource({...})
});

kendo.bind($("#model"), model);

 

Thank you!

[Georgi Krustev]

Hello Igor,

In general, the used approach is viable, because there are no connections between the clicked button and the grid. If you would like to avoid retrieving the object using jQuery on click, then you can create an object in the app namespace that can hold the instances of the created widgets. Something like this:

//kendo.bind is called here

window.[your app namespace].widgets["grid1"] = $("#grid").data("kendoGrid");

Of course, this is just a spyke and the concrete implementation is up to your personal preferences.

Regards,
Georgi Krustev
Telerik