How use DurandalGrid widget in my Durandal SPA project?

Question

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

Answer 1

Durandal-grid is a 'widget' so first you have to setup Durandal to use the widget. Here is the steps:

1. Open your 'widgets' folder (app/widgets).
2. Create a new folder inside that folder (mine is 'grid').
3. Copy 2 files from durandal-grid (view.html and view model.js) to that folder (app/widgets/grid).

4. Modify your main.js file :

   //specify which plugins to install and their configuration app.configurePlugins({ router:true, dialog: true, widget: { kinds: ['grid'] } });

5. The 'grid' refers to the name of your new folder.

6. Enjoy!!!

That's it, good luck !!!