Any Grid suggestions for Breeze? [closed]

Question

We decided to use Web API, EF + ASP.NET MVC 4 + Knockout + Breeze for our project after a long research. But we can not find any working grid for Breeze. We want to bind breeze entities to grid and be able to edit data on grid for some scenarios.

We try new grids almost everyday but still no luck, for example, we tried jqxGrid (from jqWidgets) but it throws an exception while binding data (possibly because of circular references between entities). If we don't use breeze entity and select an anonymous type it works ok.

Do you have any suggestion?

Thanks in advance.

Answer 1

we decided to go with KoGrid, after some research, we could do all we need. Thank you all for help. You may find our test code below. Have a nice day.

    <!--3rd party library scripts -->
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/json2.js"></script>
<script src="~/Scripts/es5-sham.min.js"></script>
<script src="~/Scripts/es5-shim.min.js"></script>
<script src="~/Scripts/knockout-2.1.0.js"></script>
<script src="~/Scripts/q.js"></script>
<script src="~/Scripts/jquery.json-2.3.js"></script>
<script src="~/Scripts/KoGrid.debug.js"></script>


<script type="text/javascript">
    $(document).ready(function () {
        var GridViewModel = function () {
            var self = this;
            self.products = ko.observableArray();
            self.currentPage = ko.observable(1);
            self.pageSize = ko.observable(10);
            self.totalServerItems = ko.observable(80);
            self.selectedItem = ko.observable();
            self.sortInfo = ko.observable();
            self.filterInfo = ko.observable();
            self.updateItem = function () { };

            var entityModel = window.breeze.entityModel;
            var entityManager = new entityModel.EntityManager('api/Service');
            var metadataStore = entityManager.metadataStore;
            metadataStore.importMetadata($.toJSON(metadata));
            var op = window.breeze.FilterQueryOp;

            this.getPagedDataAsync = function (pageSize, page, filterInfo, sortInfo) {
                var columnName = "ProductID";
                if (sortInfo != null)
                    columnName = sortInfo.column.field + " " + sortInfo.direction;

                var query = entityModel.EntityQuery.from("Products").orderBy(columnName).skip((page - 1) * pageSize).take(pageSize);
                for (var propertyName in filterInfo) {
                    query = query.where(propertyName, op.StartsWith, filterInfo[propertyName]);
                }

                entityManager.executeQuery(query).then(function (data) {
                    self.products.removeAll();
                    var items = data.results;
                    items.forEach(function (item) {
                        self.products.push(item);
                    });
                });                    
            };

            this.dataChangedTrigger = ko.computed(function () {
                var page = self.currentPage(),
                    pageSize = self.pageSize(),
                    filterInfo = self.filterInfo(),
                    sortInfo = self.sortInfo();

                if (page && pageSize) {
                    self.getPagedDataAsync(pageSize, page, filterInfo, sortInfo);
                }

                return null;
            });
        }

        var model = new GridViewModel();
        ko.applyBindings(model);
        model.getPagedDataAsync(10, 1, model.filterInfo(), model.sortInfo());
    });
</script>

<div id="sandBox" class="example" style="height: 600px; width:600px; max-width: 700px;" 
    data-bind="koGrid: { data: products,
                        columnDefs: [{ field: 'ProductName', width: 200 },
                                     { field: 'QuantityPerUnit', width: 200 },
                                     { field: 'UnitPrice', width: 150 }],
                         autogenerateColumns: false,
                         isMultiSelect: false,
                         enablePaging: true,
                         useExternalFiltering: true,
                         useExternalSorting: true,
                         filterInfo: filterInfo,
                         sortInfo: sortInfo,
                         pageSize: pageSize,
                         pageSizes: [10, 20, 50],
                         currentPage: currentPage,
                         totalServerItems: totalServerItems,
                         selectedItem: selectedItem }">
</div>

<!-- Application scripts -->
<script src="~/Scripts/breeze.js"></script>
<script src="~/Scripts/app/metadata.js"></script>

Answer 2

I was searching for a grid for some time too. I examined jQGrid, koGrid, slickGrid and some more. I am using DataTables with a knockout extension now, which can be found here: http://datatables.net/forums/discussion/4969/knockoutjs/p1

It can be styled with bootstrap and is highly customizable with templates and much more. You have to do some linking between breeze and DataTables, but it works very well for me.

Answer 3

It is very easy to have an editable grid with KO.

This is a proof of concept: http://jsfiddle.net/vtortola/wx8cL/

(please don't mind the CSS :D )

Basically, you can have a row template for viewing, and a row template for editing:

<script id="inner-row-tmpl" type="text/html">
        <td data-bind="text: par1"></td>
        <td data-bind="text: par2"></td>
        <td data-bind="text: par3"></td>
        <td><button class="edit">Edit</button></td>
</script>

<script id="row-tmpl" type="text/html">
    <tr data-bind="template: { name: 'inner-row-tmpl'}">
    </tr>
</script>

<script id="editable-inner-row-tmpl" type="text/html">
        <td class="editable-row" data-bind="text: par1"></td>
        <td><input type="text" data-bind="value: par2"/></td>
        <td><input type="text" data-bind="value: par3"/></td>
</script>

Cheers.