This is a migrated thread and some comments may be shown as answers.

Bind DataSource inside MVVM View Model to Grid Created in JavaScript

3 Answers 149 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Douglas
Top achievements
Rank 1
Douglas asked on 02 Jul 2015, 05:17 PM

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?

3 Answers, 1 is accepted

Sort by
0
Accepted
Alexander Valchev
Telerik team
answered on 06 Jul 2015, 08:10 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Douglas
Top achievements
Rank 1
answered on 06 Jul 2015, 03:26 PM

[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.

0
Alexander Valchev
Telerik team
answered on 08 Jul 2015, 08:21 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
MVVM
Asked by
Douglas
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Douglas
Top achievements
Rank 1
Share this question
or