Gibt es eine Möglichkeit, Kendo-Gitter in eckigen zu aktualisieren?

Question

Ich habe alles unter der Erde versucht, den Kendo-gird habe eine Auffrischung in Angular Umgebung zu haben, ohne eine Aktualisierung der Seite zu veranlassen, mit:

ich in meinem Controller folgenden Code habe:

$scope.$on('import-grid-loaded', function (event, args) { 
      alert('hello'); 
      portabilityService.portList($ 
       $scope.importGridOptions = { 
        dataSource: 
         { 
          data: new kendo.data.ObservableArray($scope.portDetails), 
          pageSize: 10 
         }, 
        sortable: { 
         mode: "multiple", 
         allowUnsort: true 
        }, 
        pageable: { 
         refresh: true 
        }, 
        dataBound: function() { 
         this.expandRow(this.tbody.find("tr.k-master-row").first()); 
        }, 

        detailTemplate: $('#Details').html(), 

        columns: [ 
         { 
          field: "FileName", 
          title: "File Name", 
          width: "120px" 
         }, 
         { 
          field: "RequestedByUseraname", 
          title: "Imported By", 
          width: "120px" 
         }, 

          { 
           field: "CreatedOn", 
           title: "Imported On", 
           width: "120px", 
           type: "date", 
           format: "{0:dd MMM yyyy} at {0:h:mm tt }" 
          }, 
         { 
          field: "StateString", 
          title: "State", 
          width: "120px", 
          encoded: true, 
          template: '#=GetFaClass(data.StateString)#' 
         } 
        ] 
       }; 

      }); 
     }); 

Mein HTML sieht aus wie

<div id="importGrid"ng-if="portDetails" class="row table-condensed table-frame grid" kendo-grid k-options={{importGridOptions}} k-rebind={{portDetails}}></div> 

1. Dieser Code stellt sicher, dass $ scope.PortDetails vor der ersten Last
existiert
2. Lädt das Grid auch beim ersten Laden erfolgreich
3. Jetzt möchte ich das Grid aktualisieren, wenn die Portdetails aktualisiert werden. Aus diesem Grund habe ich ein Event ausgestrahlt, so dass es den obigen Code in meinem Controller erneut ausführt und ich hoffe, dass es das Raster wieder bindet. Aber es passiert nichts

Ich habe auch andere Möglichkeiten, wie JQuery versucht

$('#importGrid').data('kendoGrid').dataSource.data(data); 
    $('#importGrid').data('kendoGrid').dataSource.read(); 
    $('#importGrid').data('kendoGrid').refresh(); 

das auch nicht funktioniert. Gibt es eine einfache Möglichkeit, das Kendo-Grid in Angular zu aktualisieren, nachdem die Datenquelle aktualisiert wurde?

Answer 1

Sie tun nicht falsch, um das Raster zu aktualisieren. Ich denke, die Art, wie Sie Ihre Daten erstellen, ist falsch. Wenn Sie die Daten der dataSource basierend auf Ihrem Datenfeld auf ein neues ObservableArray setzen, erstellen Sie eine Kopie davon, z. B. einen Snapshot, sodass sie sich nicht mehr ändert. Wenn Sie die Daten des Rasters ändern möchten, müssen Sie dies direkt in den Daten der Datenquelle ändern. So Änderungen in $scope.portDetails werden nicht wirksam, was es wahrscheinlich ist, was Sie tun, unter Berufung auf $scope.portDetails für Daten.

In this demo Sie haben zwei Gitter, ist die zweite wie das Ihre initialisiert, ist das erste, was ich denke, was Sie tun müssen:

dataSource: { 
    transport: { 
     read: function(options) { 
      options.success(new kendo.data.ObservableArray($scope.portDetails)); 
     } 
    } 
} 

Beachten Sie, dass erste Gitter neue Daten empfängt, wenn Sie es hinzufügen und erfrischt, aber der zweite tut nicht. Der obige Code stellt sicher, dass immer ein neues ObservableArray des aktuellen Status $scope.portDetails erstellt wird, immer wenn dataSource neue Daten liest.