Example of how to use Kendi UI's Grid with Durandal - asp.net-mvc-4

Question

I've been messing with this for like 2 days and I just don't get it how to make KendoUI's Grid work with Durandal ie what has to be in the view and what in the viewmodel. I need to fetch the data from a service via Web API but I haven't even got it rendering.
Can anybody please help?
What I did this far:
Viewmodel:
function viewAttached(view) {
var vw = $(view),
grid = $('#pgGrid', vw);
var sampledata = [
{ "ID": 1, "firstName": 'Andrew', "lastName": 'Test' },
{ "ID": 2, "firstName": 'Aidi', "lastName": 'Test' },
{ "ID": 3, "firstName": 'Aiko', "lastName": 'Test' }
];
var pgtemplate = kendo.template($('#pgtemplate', vw).html());
var dataSource = new kendo.data.DataSource({
data: sampledata,
change: function () { // subscribe to the CHANGE event of the data source
$("#pgGrid tbody").html(kendo.render(pgtemplate, this.view())); // populate the table
}
});
dataSource.read();
grid.kendoGrid({
columns: [
{ title: 'ID', field: 'id', width: 40, template: pgtemplate },
{ title: 'First name', field: 'firstName', width: 40, template: pgtemplate },
{ title: 'Last name', field: 'lastName', width: 40, template: pgtemplate }
],
dataSource: dataSource,
editable: false,
pageable: {
refresh: true,
previousNext: false,
numeric: false
},
scrollable: {
virtual: true
},
sortable: false
});
}
And the view:
<div id="pgGrid"
data-kendo-role="grid"
data-kendo-bind="source: gridSource"
data-kendo-editable="true"
data-kendo-columns='["ID",
{ "field": "firstName", "width": "150px" },
{ "field": "lastName", "width": "100px" }]'
data-kendo-pageable="true">
</div>
<script id="pgtemplate" type="text/x-kendo-template">
<tr>
<td>#= id #</td>
<td>#= firstName #</td>
<td>#= lastName #</td>
</tr>
</script>
And I also have set up kendo binding in main.js:
kendo.ns = 'kendo-';
binder.beforeBind = function (obj, view) { kendo.bind(view, obj.viewModel); };
Can anyone please help
Andrew.

Answer 1

Since you are trying to use kendo mvvm to bind the kendo grid (kendo.ns = 'kendo-') you don't have to use jquery to select the grid and render it( grid.kendoGrid({ ) . In your view model just make a property call gridDatasource,
define(function (require) {
return {
gridDatasource:function(){
var sampledata = [
{ "ID": 1, "firstName": 'Andrew', "lastName": 'Test' },
{ "ID": 2, "firstName": 'Aidi', "lastName": 'Test' },
{ "ID": 3, "firstName": 'Aiko', "lastName": 'Test' }
];
var dataSource = new kendo.data.DataSource({
data: sampledata,
change: function () { // subscribe to the CHANGE event of the data source
$("#pgGrid tbody").html(kendo.render(pgtemplate, this.view())); // populate the table
}
});
return dataSource;
}
}
});
And just remove the viewAttached function you don't have to define grid in javascript again since you have defined it in the HTML.
And you can give the row template like this,
<div id="pgGrid"
data-kendo-role="grid"
data-kendo-bind="source: gridSource"
data-kendo-editable="true"
data-kendo-columns='["ID",
{ "field": "firstName", "width": "150px" },
{ "field": "lastName", "width": "100px" }]'
data-kendo-pageable="true"
data-kendo-rowTemplate="pgtemplate"
>
</div>

Answer 2

Knockout Kendo library simplifies this , have a look at this link , also if you use knockout external template you can define the rowTemplate in external file and load it dynamically. Refer this answer about fix for knockout external template when used with durandal