CODEWITHSUNDEEP
angularjskendo-uikendo-grid
Stefan
Stefan

Reputation: 1511

Dynamic bind kendo grid dataSource binded to directive

I create dataSourec in the controller 

$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 }
                          }
                      }
                  }
              });

Then I bind it to my component

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

where I add it to options of my grid

 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: "" } }
                };

and then bind to kendo grid in the component view

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

I show component view when someone switch the button(data-ng-if="!displayList" in code above). I have to switch button to displayList = true and then again to displayList = false, to update grid data, why it do not update dynamicly when dataSource change in my controller, and button is set to show kendoGrid?

Upvotes: 3

Views: 760

Answers (1)

Stefan
Stefan

Reputation: 1511

I have resolved the problem by declare ctrl.gridOptions as function

 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"
                    }]
                };
            }

and then bind it to the view 

<kendo-grid data-k-scope-field="$ctrl.analyticsGrid" data-k-options="$ctrl.gridOptions()" data-k-rebind="$ctrl.dataSource"></kendo-grid>

My job mate told that problem occurred couse view was looking for object of options and don't know how to resolve it when dataSource change. Right now it just call method and get options with new dataSource.

Upvotes: 1

Related Questions