Eventuali suggerimenti Grid per Breeze?

Question

Abbiamo deciso di utilizzare Web API, EF + ASP.NET MVC 4 + Knockout + Breeze per il nostro progetto dopo una lunga ricerca. Ma non possiamo trovare alcuna griglia di lavoro per Breeze. Vogliamo legare le entità di brezza alla griglia ed essere in grado di modificare i dati sulla griglia per alcuni scenari.

Proviamo nuove griglie quasi ogni giorno ma ancora senza fortuna, per esempio, abbiamo provato jqxGrid (da jqWidgets) ma genera un'eccezione durante il binding dei dati (probabilmente a causa di riferimenti circolari tra entità). Se non usiamo l'entità di breeze e selezioniamo un tipo anonimo, funziona bene.

Avete qualche suggerimento?

Grazie in anticipo.

Answer 1

abbiamo deciso di andare con KoGrid, dopo alcune ricerche, potremmo fare tutto ciò di cui abbiamo bisogno. Grazie a tutti per l'aiuto. Puoi trovare il nostro codice di prova qui sotto. Buona giornata.

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

Ero alla ricerca di una griglia anche per un po 'di tempo. Ho esaminato jQGrid, koGrid, slickGrid e altri ancora. Sto usando DataTables con un'estensione a eliminazione diretta ora, che può essere trovato qui: http://datatables.net/forums/discussion/4969/knockoutjs/p1

Può essere abbinato a bootstrap ed è altamente personalizzabile con i modelli e molto altro. Devi fare un po 'di collegamento tra brezza e DataTables, ma funziona molto bene per me.

Answer 3

È molto facile avere una griglia modificabile con KO.

Questa è una prova di concetto: http://jsfiddle.net/vtortola/wx8cL/

(per favore non mente il CSS: D)

In sostanza, si può avere un modello di fila per la visualizzazione, e un modello di fila per la modifica:

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