Bind DataSource inside MVVM View Model to Grid Created in JavaScript

4 posts, 1 answers
  1. Douglas
    Douglas avatar
    9 posts
    Member since:
    Jul 2013

    Posted 02 Jul 2015 Link to this post

    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?

  2. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 06 Jul 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Douglas
    Douglas avatar
    9 posts
    Member since:
    Jul 2013

    Posted 06 Jul 2015 in reply to Alexander Valchev Link to this post


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

     

    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.

  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 08 Jul 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready