在ajax调用之后更新Kendo Grid内容

时间:2014-11-22 17:33:57

标签: javascript jquery angularjs kendo-ui kendo-grid

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

1 个答案:

答案 0 :(得分:2)

选项1:

问题是您要修改success处理程序中网格的选项,但options不是ObservableObject,即一旦初始化,就不会观察到更改。如果要更改KendoUI grid对象,则需要使用以下内容:

添加到您的HTML定义kendo-grid="grid",以便我们可以从$scope引用网格对象:

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

现在在success事件处理程序中移动Grid选项初始化:

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