How to use MVVM with DataSource

11 posts, 0 answers
  1. Jeffery
    Jeffery avatar
    18 posts
    Member since:
    Sep 2006

    Posted 24 Mar 2012 Link to this post

    Hi,

    I am trying to setup MVVM with data coming from remote DataSource. Following is my data:

    { "Id": "N0001", Name="test" }

    I am trying to use the following code to load data from remote source and bind it to the page:

    <div class="row">
    <div class="span1">Id:</div>
    <div class="span7" data-bind="text: Id"></></div>
    </div>
    <div class="row">
    <div class="span1">Name:</div>
    <div class="span7" data-bind="text: Name"></div>
    </div>

    <script type="text/javascript">
    $(document).ready(function () {
    var dataSource = new kendo.data.DataSource({
    transport: { read: "/api/Institution/1", dataType: "json" },
    schema: {  model: {  id: "Id",  fields: {  Id: { type: "string" },  Name: { type: "string" } }  }  }
    });
    dataSource.read();
    var viewModel = kendo.observable({
    inst: dataSource.view()[0]
    });
    kendo.bind($("div#InstitutionHeader"), viewModel.inst);
    });
    </script>

    Unfornately, this code does not work.  I am wondering if you have any sample code to do so.  (You have some sample code using you UI widgets with remote data.  You also have sample to do MVVM using array data.  But, I could not really find sample code combining MVVM with DataSource.)

    Besides this, I am trying to use WebApi (MVC 4) to expose some simple readonly data points.  I used to use jQuery ajax to load and display them on page.   After watching your demos, I am wondering if I should use DataSource and/or MVVM for these?  When using with live / editable data, MVVM makes sense, how about readonly data?  What is best KendoUi approach to do this kind of "bind once" scenario?

    Thanks in advance.
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 25 Mar 2012 Link to this post

    Hi,

    This example shows how to use Kendo MVVM with a remote data source. 

    Greetings,
    Atanas Korchev
    the Telerik team
    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. Jeffery
    Jeffery avatar
    18 posts
    Member since:
    Sep 2006

    Posted 25 Mar 2012 Link to this post

    Hi Atanas,

    Thanks for pointing this sample out.  I have studied it.  Unfortunately, I have not figured out how to adapt it to fix my own code.  Your sample code set the "selectedProduct" member using the dropdownlist.  I am trying to get the data directly exposed via DataSource.  I do not see much difference, however, I could get it work.  Could you please help?

    More than getting the sample code work, I am also really want to know if MVVM + DataSource the best practice to display read-only (binding once) data.  Do you have any suggestion on this?

    Thanks agai for all your help.
  5. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 26 Mar 2012 Link to this post

    Hello,

     I checked your code there is one immediate issue. The data source read method is asynchronous. This means that the response will not be received immediately after calling read(). You should use the change  event of the datasource instead:

    $(document).ready(function () { 
    var dataSource = new kendo.data.DataSource({ 
    transport: { read: "/api/Institution/1", dataType: "json" }, 
    schema: {  model: {  id: "Id",  fields: {  Id: { type: "string" },  Name: { type: "string" } }  }  } ,
    change: function() {
       var viewModel = kendo.observable({ 
             inst: this.view()[0] 
       }); 
       
        kendo.bind($("div#InstitutionHeader"), viewModel.inst);  
    }
    });  

    Regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Jeffery
    Jeffery avatar
    18 posts
    Member since:
    Sep 2006

    Posted 26 Mar 2012 Link to this post

    Hi Atanas,

    I have tried that already.  The change event is not triggered at all, so I have added the call to dataSource.read().  The event will be triggered.  However, when I step into javascript, this.view().length is undefined. (I have verified that the json response seems fine.  Under the dataSource._pristine property, I did see my data.)  What could be the issue here?  Will your viewModel have the ability to call the underline dataSource when needed much like other UI widgets?

    Thanks again for all your help.,
    Jeffery
  7. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 26 Mar 2012 Link to this post

    Hello,

     The Kendo DataSource works with arrays and expects arrays when populating from a remote service. The result returned in your case is not an array. 

    Regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Jeffery
    Jeffery avatar
    18 posts
    Member since:
    Sep 2006

    Posted 27 Mar 2012 Link to this post

    Thanks Atanas.

    You nailed it.  With that I did correct my code.  It is working now.  I have to bother you again with my another unanswered question: is MVVM the right solution for displaying read-only  (bind once) data?  How much overhead will MVVM have vs jQuery direct assignment?

    Thanks,
    Jeffery
  9. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 28 Mar 2012 Link to this post

    Hi,

     The Kendo MVVM is designed not to have much overhead. It is best to try it for yourself and see if the performance is adequate.

    Regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Joshua
    Joshua avatar
    66 posts
    Member since:
    May 2012

    Posted 10 Aug 2012 Link to this post

    I am saying multiple requests to my service when i use this method.

    Is there anyway to correct this? 

    http://jsfiddle.net/grippstick/nrpVF/ 
  11. Pavan
    Pavan avatar
    5 posts
    Member since:
    Apr 2011

    Posted 15 Sep 2014 Link to this post

    Hi Joshua,

    I know this is an old post. But you mentioned"With that I did correct my code.  It is working now.".
    Just checking to see, if you could post your solution here.

    Thanks
  12. Pavan
    Pavan avatar
    5 posts
    Member since:
    Apr 2011

    Posted 15 Sep 2014 Link to this post

    Hi Jeffery,
    I know this is an old post. But you mentioned"With that I did correct my code.  It is working now.".
    Just checking to see, if you could post your solution here.

    Thanks
Back to Top
Kendo UI is VS 2017 Ready