I want to create a SPA with durandalJS and Asp.net Web Api frameworks. I have a viewmodel and a view that is responsible for showing the list of People in a grid Along with paging and custom rows.
I used durandal grid (https://github.com/tyrsius/durandal-grid) widget for this purpose, but this not mork. ;(
here is my module (viewmodel):
define(["durandal/app"], function (app){
var initialData = [
{ firstname: "James", lastname: "Smith", age: 35 },
{ firstname: "John", lastname: "Johnson", age: 89 },
{ firstname: "Robert", lastname: "Williams", age: 15 },
{ firstname: "Michael", lastname: "Brown", age: 10 },
{ firstname: "William", lastname: "Jones", age: 30 },
{ firstname: "David", lastname: "Miller", age: 394 },
{ firstname: "Richard", lastname: "Davis", age: 420}
];
var observableData = ko.observableArray(initialData);
function removeRow(el) {
// some code
}
return {
removeRow : removeRow
//Grid config options
gridConfig: {
data: observableData,
pageSize: 5,
columns: [
{ header: 'First Name', property: 'firstName' },
{ header: 'Last Name', property: 'lastname' },
{ header: 'Age', property: 'age' },
{ header: '', property: '', canSort: false }
]}
};
})
and this is my view:
<table data-bind="grid: gridConfig" class="table">
<tbody data-part="body" data-bind="foreach: { data: rows, as: 'row' }">
<tr>
<td data-bind="text: firstname"></td>
<td data-bind="text: lastname"></td>
<td data-bind="text: age"></td>
<td><button class="btn btn-xs btn-danger" data-bind="click: $root.removeRow">Remove</button></td>
</tr>
</tbody>
when I run my project I got this error:
Unable to process binding "foreach: function (){return { data:rows,as:'row'} }"
Message: rows is not defined;
View: views/people/getPeople;
ModuleId: viewmodels/people/getPeople
How do I config DurandalGrid correctly? Please show me a sample. THANKS
Durandal-grid is a 'widget' so first you have to setup Durandal to use the widget. Here is the steps:
Modify your main.js file :
//specify which plugins to install and their configuration
app.configurePlugins({
router:true,
dialog: true,
widget: {
kinds: ['grid']
}
});
The 'grid' refers to the name of your new folder.
Enjoy!!!
That's it, good luck !!!