Bind DataSource inside MVVM View Model to Grid Created in JavaScript

[Douglas]

I have a <div> that is bound to an MVVM View Model.  Inside the <div> I have a Kendo Grid.  I can't use the normal "data-" attributes because the column template syntax combined with razor syntax just does not mix.  So, I'm trying to create the grid using the $('#grid').kendoGrid(); syntax.

 My problem is that I don't see anyway to bind the dataSource of the grid to my dataSource inside the View Model.  Is this possible?

[Alexander Valchev]

Hello Douglas,

We do not recommend mixing various type of initialization as this is an error prone approach.

In case you insist using the $('#grid').kendoGrid(); syntax you may assign the DataSource in the configuration options. For example:

var viewModel = kendo.observable({
   mySource: new kendo.data.DataSource({ /* .... */ });
});

$("#grid").kendoGrid({
   dataSource: viewModel.mySource,
   /* etc... */
});

Regards,
Alexander Valchev
Telerik

 

 

[Douglas]

[quote]
We do not recommend mixing various type of initialization as this is an error prone approach.
[/quote]

 

Thanks, that is the approach that I finally decided upon.  What are the pitfalls?  Anything important.  The only thing my grid needs from the view model is the datasource, I'm not using any events or other types of binding on the grid.

 Thanks.

[Alexander Valchev]

Hi Douglas,

The main problem is multiple widget initialisation. For example if you call $('#grid').kendoGrid() before kendo.bind, the #grid element will have data role attribute and MVVM binder will attempt to re-initialise it.

If $("#grid").data("kendoGrid") is used bindings inside the Grid template will not work either.

Regards,
Alexander Valchev
Telerik