Binding Knockout/Breeze Entities to IgniteUI igGrid

Question

Let me first start off by stating my overall goal, then I will ask the specific question. My goal is to find a Grid control to use in my SPA (Durandal, Knockout, Breeze etc.) for CRUD functionality. I have looked high and low for a grid (Kendo, JQGrid, JQXGrid, IgniteUI etc.) that plays nice with Knockout/Breeze and gives me the functionality I need, but I cannot seem to find one. The closest one so far is IgniteUI's iqGrid.

My specific question:

I can query my WebAPI using Breeze, and get the results fine. I can also bind the results to the grid using an observable array, manually, and get them to display no problem. What I mean by bind manually is, I have to set each property and push it to the array.

return this.manager.executeQuery(query)
    .then(function (data) {
        data.results.forEach(function (item) {
            me.data.push({
                Id: item.Id,
                FirstName: item.FirstName,
                LastName: item.LastName,
                ProductName: item.ProductName,
                Quantity: item.Quantity,
                Price: item.Price,
                Created: item.Created,
                Enabled: item.Enabled
            });
        });
    })

The 'data' property is a Knockout Observable Array.

This is not my ideal solution however. If I add a field to the table, that is just one place I have to add it in code. My ideal solution is to have the Breeze entity map automagically to the Knockout Observable Array and display correctly in the grid.

For example I have tried this, which works with simple grids created manually with a table:

return this.manager.executeQuery(query)
    .then(function (data) {
        me.data(data.results);
    })

But this doesn't display any data in the igGrid.

I have also tried this:

me.data = ko.toJS(data.results);

Which doesn't work either.

So my question is, is there a way to accomplish this? More over, is there a better way to create CRUD apps, using existing tools? i.e. without writing it from scratch?

Thanks

Wayne Ellery Wayne Ellery · Accepted Answer · 2014-06-13T14:30:53

Try this:

return this.manager.executeQuery(query)
.then(function (data) {
    data.results.forEach(function (item) {
        me.data.push(item);
    });
})

Binding Knockout/Breeze Entities to IgniteUI igGrid

1 Answers