动态绑定kendo网格dataSource绑定到指令

时间:2017-04-28 08:34:44

标签: angularjs kendo-ui kendo-grid

我在控制器中创建dataSourec

$scope.dataSource = new kendo.data.DataSource({
                  transport: {
                      read: function (e) {
                          e.success(response.data.value);
                      }
                  },
                  serverFiltering: true,
                  serverSorting: true,
                  pageSize: 20,
                  schema: {
                      model: {
                          fields: {
                              languageId: { type: 'number', editable: true, nullable: false },
                              dateStart: { type: 'date', ediitable: true },
                              dateEnd: { type: 'date', ediitable: true },
                              count: { type: 'number', editable: true, nullable: false }
                          }
                      }
                  }
              });

然后我将它绑定到我的组件

    <div data-ng-if="!displayList">
    <analytics-grid data-data-source="dataSource"></analytics-grid>
</div

我把它添加到我的网格选项

 ctrl.gridOptions = {
                    dataSource: ctrl.dataSource,
                    sortable: true,
                    pageable: true,
                    columns: [{
                        field: "languageId",
                        title: "language",
                        width: "120px",
                        filterable: false,
                        values: _languagesLookupDS.data().toJSON()
                    }, {
                        field: "count",
                        title: "count"
                    }, {
                        field: "dateStart",
                        title: "dateStart"
                    }, {
                        field: "dateEnd",
                        title: "dateEnd"
                    }],
                    editable: {
                        mode: 'popup',
                        confirmation: true
                    },
                    messages: { commands: { create: "" } }
                };

然后在组件视图中绑定到kendo网格

<kendo-grid data-k-options="$ctrl.gridOptions" data-k-ng-delay="$ctrl.gridOptions" data-k-rebind="$ctrl.dataSource"></kendo-grid>

当有人切换按钮时,我会显示组件视图(data-ng-if =&#34;!displayList&#34;在上面的代码中)。我必须将按钮切换到displayList = true,然后再切换到displayList = false,更新网格数据,为什么在我的控制器中dataSource更改时动态更新,并且按钮设置为显示kendoGrid?

1 个答案:

答案 0 :(得分:1)

我已将ctrl.gridOptions声明为函数

解决了这个问题
$postData = "žluťoučký kůň úpěl ďábelské ódy"
Invoke-WebRequest -Uri 'http://www.example.com/' -Method Post -Body $postData 
 -ContentType "text/plain; charset=utf-8"

然后将其绑定到视图

 ctrl.gridOptions = function () {
                return {
                    dataSource: ctrl.dataSource,
                    sortable: true,
                    columns: [{
                        field: "languageId",
                        title: "language",
                        width: "120px",
                        filterable: false,
                        values: _languagesLookupDS.data().toJSON()
                    }, {
                        field: "count",
                        title: "count"
                    }, {
                        field: "dateStart",
                        title: "dateStart"
                    }, {
                        field: "dateEnd",
                        title: "dateEnd"
                    }]
                };
            }

我的工作伙伴告诉我发生了问题,因为当数据源发生变化时,他们正在寻找选项对象并且不知道如何解决它。现在它只需调用方法并使用新的dataSource获取选项。