Ajax調用后更新Kendo Grid內容

Question

我在ajax調用后更新kendo網格數據源內容，這是我的代碼

 $http
     .get("http://entengcdn.apphb.com/api/user")
     .success(function(r){
         $scope.optUser.dataSource.data = r;
     });

我也嘗試過

$http
     .get("http://entengcdn.apphb.com/api/user")
     .success(function(r){
         $scope.$apply(function(){
             $scope.optUser.dataSource.data = r;
         });
     });

但仍然無法運作

我准備了一個小提琴來查看示例JSFiddle

任何幫助，將不勝感激。

TIA

Answer 1

選項1：

問題在於您正在success處理程序中修改網格的選項，但是options不是ObservableObject ，即一旦初始化，就不會觀察到它們的更改。 如果要更改KendoUI grid對象，則需要使用以下方法：

將kendo-grid="grid"添加到您的HTML定義中，以便我們可以從$scope引用Grid對象：

<div kendo-grid="grid" kendo-grid k-options="optUser"></div>

現在，Javascript是：

$http
    .get("http://entengcdn.apphb.com/api/user")
    .success(function(r){
        // Get reference to grid object
        $scope.grid.dataSource.data(r);
    });

您的JSFiddle在這里修改： http : //jsfiddle.net/OnaBai/awkoLxrd/6/

選項2：

另一種可能性是延遲網格的創建，直到您實際獲取數據為止。 您可以將其添加到HTML k-ng-delay="optUser" ：

<div kendo-grid k-options="optUser" k-ng-delay="optUser"></div>

現在將Grid選項初始化移動到success事件處理程序中：

$http
    .get("http://entengcdn.apphb.com/api/user")
    .success(function(r){
        $scope.optUser = {
            dataSource: {
                data: r,
                ...
            },
            sortable: true,
            selectable: "single",
            ...
        };        
    });

您的JSFiddle在這里進行了修改： http : //jsfiddle.net/OnaBai/awkoLxrd/5/