I have a scenario where the data for the grid, as well as other parts of the ui , needs to be pulled with a separate $scope function and stored in a $scope variable.
In order to replicate this, I used a function from your demos.
I was not able to make this work.
What am I doing wrong?
http://dojo.telerik.com/ehEXEn
<!DOCTYPE html>
<
html
>
<
head
>
<
base
href
=
"http://demos.telerik.com/kendo-ui/grid/angular"
>
<
style
>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</
style
>
<
title
></
title
>
<
link
rel
=
"stylesheet"
href
=
"https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-material.min.css"
/>
<
link
rel
=
"stylesheet"
href
=
"https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.min.css"
/>
<
link
rel
=
"stylesheet"
href
=
"https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.mobile.min.css"
/>
<
script
src
=
"https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"
></
script
>
<
script
src
=
"https://kendo.cdn.telerik.com/2017.2.621/js/angular.min.js"
></
script
>
<
script
src
=
"https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"
></
script
>
<
script
src
=
"../content/shared/js/people.js"
></
script
>
</
head
>
<
body
>
<
div
id
=
"example"
ng-app
=
"KendoDemos"
>
<
div
ng-controller
=
"MyCtrl"
>
<
div
kendo-grid
=
"mainGrid"
options
=
"mainGridOptions"
k-data-source
=
'mainGridDataSource'
>
</
div
>
</
div
>
</
div
>
<
style
>
.contact-info-form {
list-style-type: none;
margin: 30px 0;
padding: 0;
}
.contact-info-form li {
margin: 10px 0;
}
.contact-info-form label {
display: inline-block;
width: 100px;
text-align: right;
font-weight: bold;
}
</
style
>
<
script
>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.mainGridDataSource = new kendo.data.DataSource({data:[], pageSize: 100});
$scope.mainGridOptions = {
sortable: true,
height: 543,
//pageSize:100,
//dataSource: {pageSize: 100, data:[]},
scrollable: {
virtual: true
},
pageable: {
numeric: false,
previousNext: false,
messages: {
display: "Showing {2} data items"
}
},
columns: [{
field: "FirstName",
title: "First Name",
width: "120px"
},{
field: "LastName",
title: "Last Name",
width: "120px"
},{
field: "City",
width: "120px"
},{
field: "Title"
}]
};
generatePeople(500000, function(results) {
//console.log(results);
$scope.mainGridDataSource = new kendo.data.DataSource({data: results, pageSize: 100});
console.log($scope.mainGridDataSource);
$scope.mainGridDataSource.read();
$scope.mainGrid.refresh();
$scope.mainGrid.dataSource.read();
$scope.mainGrid.refresh();
});
})
</
script
>
</
body
>
</
html
>