Kendo DataSource, AngularJS - undefined property - angularjs

Question

I want to fill a grid with a complex json returned from a webservice. My json contains two things:
data: array with the records that will fill the grid
columns: array with the config(layout) of the grid
I have successfully filled the grid with the "data" by specifying the schema.data.
My problem is with the grid config (layout). I get the columns array on the requestEnd event of the datasource and i add it to the customersSource (datasource) so i can access it in the gridOptions.
The problem is that even though when i log the customersSource object i see that the cols array i added, is there and is filled with the proper data the $scope.mainGridOptions.columns isn't set to customersSource.cols.
I think that this may have to do with the fact that customersSource.cols is set asynchronously but shouldn't angular take care of this with it's databinding?
Also i have read in Data source vs. Angular that i may have to set something as Observable but i am confused of what to do exactly.
How can i fix this?
Here is my code:
var customersSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://....",
dataType: "json"
}
},
schema: {
data: "data"
},
requestEnd: function (e) {
this.cols = e.response.columns;
}
});
$scope.mainGridOptions = {
dataSource: customersSource, // OK
columns: customersDataSource.cols, // undefined - uses default
height: 500,
scrollable: true,
selectable: true
};
Here is my JSON
{
"data": [
{
"id": 0,
"firstname": "Dalton",
"lastname": "Holden",
"gender": "male",
"email": "daltonholden#tellifly.com",
"phone": "871-407-2973",
"address": "22 National Drive, Brenton, Louisiana",
"birthday": "21/04/1965",
"currency": "GBP"
},
{
"id": 1,
"firstname": "Allyson",
"lastname": "Odom",
"gender": "female",
"email": "allysonodom#tellifly.com",
"phone": "922-548-2725",
"address": "44 Quincy Street, Thynedale, Georgia",
"birthday": "28/08/1961",
"currency": "CHF"
},
{
"id": 2,
"firstname": "Sweet",
"lastname": "Branch",
"gender": "male",
"email": "sweetbranch#tellifly.com",
"phone": "880-593-2244",
"address": "81 Fenimore Street, Veguita, Missouri",
"birthday": "08/08/1953",
"currency": "AUD"
}
],
"columns": [
{
"field": "firstname",
"title": "Frist Name",
"width": 200,
"attributes": {
"class": "",
"style": "text-align: left;"
},
"headerAttributes": {
"class": "table-header-cell",
"style": "text-align: left;"
}
},
{
"field": "lastname",
"title": "Last Name",
"attributes": {
"class": "",
"style": "text-align: left;"
},
"headerAttributes": {
"class": "table-header-cell",
"style": "text-align: left;"
}
},
{
"field": "gender",
"title": "Gender",
"attributes": {
"class": "",
"style": "text-align: left;"
},
"headerAttributes": {
"class": "table-header-cell",
"style": "text-align: left;"
}
},
{
"field": "email",
"title": "e-mail",
"attributes": {
"class": "",
"style": "text-align: left;"
},
"headerAttributes": {
"class": "table-header-cell",
"style": "text-align: left;"
}
},
{
"field": "phone",
"title": "Phone Number",
"attributes": {
"class": "",
"style": "text-align: right;"
},
"headerAttributes": {
"class": "table-header-cell",
"style": "text-align: right;"
}
},
{
"field": "address",
"title": "Address",
"attributes": {
"class": "",
"style": "text-align: left;"
},
"headerAttributes": {
"class": "table-header-cell",
"style": "text-align: left;"
}
},
{
"field": "birthday",
"title": "Birthday",
"attributes": {
"class": "",
"style": "text-align: center;"
},
"headerAttributes": {
"class": "table-header-cell",
"style": "text-align: center;"
}
},
{
"field": "currency",
"title": "Currency",
"attributes": {
"class": "",
"style": "text-align: center;"
},
"headerAttributes": {
"class": "table-header-cell",
"style": "text-align: center;"
}
}
]
}
Edit
I created a plunker of my testing project. As you can see i can fill the grid but i have a problem with the mainGridOptions.columns. Any help will be much appreciated!
http://plnkr.co/edit/5pjFQGkgTivqVkxsFBse

Answer 1

It's because angularjs is unaware of changes made by 3rd party and you miss the magic two-way data binding. although I think promises would work great in your case
requestEnd: function (e) {
$scope.$apply(function(){
$scope.mainGridOptions.columns = e.response.columns
})
}