Dynamic grid data binding kendoSource bound to directive
I am creating dataSourec in 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 my grid options
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 component view
<kendo-grid data-k-options="$ctrl.gridOptions" data-k-ng-delay="$ctrl.gridOptions" data-k-rebind="$ctrl.dataSource"></kendo-grid>
I am showing a component view when someone toggles a button (data-ng-if = "! DisplayList" in the code above). I have to switch the button to displayList = true and then again to displayList = false to update the grid data, why isn't it updated dynamically when the data in my controller changes and the button is set to display the kendoGrid?
source to share
I solved the problem by declaring ctrl.gridOptions as a 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 work assistant said there was a problem. The couse view was looking for an options object and doesn't know how to solve it when the datasource changes. Right now, it just calls a method and gets options with a new data source.
source to share