How to use MVVM with DataSource

[Jeffery]

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.

[Atanas Korchev]

Hi,

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

Greetings,
Atanas Korchev
the Telerik team

[Jeffery]

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.

[Atanas Korchev]

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

[Jeffery]

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

[Atanas Korchev]

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

[Jeffery]

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

[Atanas Korchev]

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

[Joshua]

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

Is there anyway to correct this? 

http://jsfiddle.net/grippstick/nrpVF/ 

[Pavan]

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

[Pavan]

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