Question

我有一个Angular应用程序，它从服务器检索我的数据，并希望使用结果来填充kendo网格。我试图创建一个kendo.data.DataSource但无法填充网格。以下是我正在尝试的内容。

    $scope.surchargeGridOptions = {
        dataSource: {
            pageSize: 15,
            autoSync: true,
            autoBind: false,
            data: $scope.model.dataSource,
    }


    $scope.getWaivers = function () {
            waiverService.getCustomers($scope.model.customer.CustomerID).then(function (result) {
            $scope.model.waivers = result.data;
            $scope.model.dataSource = new kendo.data.DataSource({
                data: $scope.model.waivers,
                });
            $scope.model.dataSource.read();
      });
   };

是否可以这样做，我应该怎么做呢？

Answer 1

选项中的数据源对象具有数据属性，该属性仅需要引用普通数组，而不是整个剑道数据源。

您应该使用k-data-source来引用您的数据......

<kendo-grid k-data-source="myData"></kendo-grid>

...而且你并不需要一个剑道数据源才能让它正常工作......

$scope.myData = [
 { name: 'a', number: 1 },
 { name: 'b', number: 1 },
 { name: 'c', number: 1 },
 { name: 'd', number: 1 }
];

..如果您有动态数据，那么剑道可观察数组将是最佳实践。

以下是code pen示例。

Answer 2

具有网格选项的前HTML页面

<div kendo-grid="ListGrid" options="ListOptions" k-rebind="ListOptions" class="k-grid-content-border"></div>


 function GridColumn() {
        return [{
            field: 'name',
            template: "<a ng-click='ToList(this.dataItem)' class='cursor-pointer'>{{this.dataItem.name}}</a>",
            title: "",
            footerTemplate: "Total",
            width: 200,
            locked: true,
        }]}

$scope.ToGeo = function (item) {
        $scope.dataLoded = false;
        GetResults(function (res) {
            $scope.ListOptions.dataSource = new kendo.data.DataSource({
                data: res,
            });
            $scope.ListOptions.columns = GridColumn();
            $scope.ListGrid.refresh();
            $scope.dataLoded = true;
        })

    }

GetResults用于API调用和获取数据

使用Angular模型列表填充Kendo Grid

2 个答案: