Irgendwelche Grid-Vorschläge für Breeze?

Question

Wir entschieden uns nach langer Recherche für unser Projekt Web API, EF + ASP.NET MVC 4 + Knockout + Breeze zu verwenden. Aber wir können für Breeze kein funktionierendes Raster finden. Wir möchten Brise-Entities an das Grid binden und in einigen Szenarios Daten im Grid bearbeiten können.

Wir versuchen neue Gitter fast jeden Tag, aber immer noch kein Glück, zum Beispiel, wir versuchten jqxGrid (von jqWidgets) aber es wirft eine Ausnahme beim Binden von Daten (möglicherweise wegen Zirkelverweise zwischen den Entitäten). Wenn wir breeze entity nicht verwenden und einen anonymen Typ auswählen, funktioniert das in Ordnung.

Haben Sie Vorschläge?

Vielen Dank im Voraus.

Answer 1

Wir entschieden uns, mit KoGrid zu gehen, nach ein wenig Forschung konnten wir alles tun, was wir brauchen. Danke Ihnen allen für Ihre Hilfe. Sie können unseren Testcode unten finden. Einen schönen Tag noch.

<!--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

Ich suchte auch nach einem Raster für einige Zeit. Ich habe jQGrid, koGrid, slickGrid und einige mehr untersucht. Ich verwende jetzt DataTables mit einer Knockout-Erweiterung, die hier zu finden ist: http://datatables.net/forums/discussion/4969/knockoutjs/p1

Es kann mit Bootstrap gestaltet werden und ist in hohem Maße mit Vorlagen und vieles mehr anpassbar. Sie müssen eine Verbindung zwischen Brise und DataTables herstellen, aber es funktioniert sehr gut für mich.

Answer 3

Es ist sehr einfach, ein bearbeitbares Gitter mit KO zu haben.

Dies ist ein Proof of Concept: http://jsfiddle.net/vtortola/wx8cL/

(bitte CSS nichts dagegen: D)

Grundsätzlich Sie eine Zeile Template für die Anzeige haben kann, und eine Reihe Vorlage zur Bearbeitung:

<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> 

Prost.