2016-08-08 30 views
2

Ich verwende die Knockout-Kendo.js-Bibliothek, um ein Kendo-Gitter mit Knockout-Bindungen zu binden. Ich habe ein System erstellt, das mehrere Datenquellen lädt, denen jeweils eigene Spalten zugewiesen sind. Ich habe alles super funktioniert, mit der Ausnahme, dass die neue Spalten-Sammlung dem Knockout-gebundenen Kendo-Gitter zugewiesen wird.Aktualisieren Knockout-Bound Kendo UI-Gitterspalten Sammlung

Ich habe ein paar Möglichkeiten gelesen, um die Spalten neu zu initialisieren, aber alle diese erfordern das Gitter zerstört und neu erstellt werden. Ich bin mir nicht sicher, wie ich das mit dem Knockout-Raster machen würde. Ich verwende den folgenden Code.

HTML:

<div data-bind="kendoGrid: gridOptions"></div> 

Knockout/JS:

self.SearchResults und self.GridColumns sind beide beobachtbaren Arrays. richtig

self.gridOptions = { 
    data: self.SearchResults, 
    columns: self.GridColumns 
}; 

Wenn ich self.SearchResults aktualisieren, aktualisiert das Raster. Die Aktualisierung self.GridColumns hat keine Auswirkungen auf die angezeigten Spalten im Raster.

Wenn mir jemand in die richtige Richtung zeigen kann, wie ich die Spaltensammlung aktualisieren und zusammen mit der Knockout-Bindung der oben verlinkten Bibliothek anzeigen würde, wäre ich sehr dankbar.

+0

'self.gridOptions' sollte eine beobachtbare, so dass die Datenbindung wissen, wenn es aktualisiert wurde. Rufen Sie nach dem Aktualisieren eines Members 'self.gridOptions.valueHasMutated()' auf. Ich basiere das nur darauf, wie die Dinge * funktionieren * sollten; Ich weiß nicht, wie die Bindung tatsächlich * funktioniert *. –

Antwort

0

Also habe ich gerade herausgefunden. Hat sich als wirklich einfach herausgestellt.

Was ich am Ende war dies zu tun:

  1. Erhalten Sie einen Verweis auf das Gitter und die aktuellen Rasteroptionen
  2. Ordnen Sie die aktualisierte self.GridColumns() den Optionen berechnet
  3. die Rasteroptionen auf die Set aktualisiert Optionen

    var grid = $("#grid").data("kendoGrid"); 
        var options = grid.getOptions(); 
        options.columns = self.GridColumns(); 
        grid.setOptions(options);