Hello community,
I am developing a small SPA Test application, the corresponding code is provided below:
Index.html: <!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>SyncFusion</title>
<!-- Style -->
<link rel='nofollow' href="~/Content/themes/bootstrap.min.css" rel="stylesheet" />
<link rel='nofollow' href="~/Content/themes/default-theme/ej.widgets.all.min.css" rel="stylesheet" />
<link rel='nofollow' href="~/Content/themes/default.css" rel="stylesheet" />
<link rel='nofollow' href="~/Content/themes/default-responsive.css" rel="stylesheet" />
<link rel='nofollow' href="~/Content/themes/responsive-css/ej.responsive.css" rel="stylesheet" />
<!-- Scripts -->
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jsrender.min.js"></script>
<script src="~/Scripts/jquery.globalize.min.js"></script>
<script src="~/Scripts/ej.web.all.min.js"></script>
<script src="~/Scripts/jsondata.min.js"></script>
<script src="~/Scripts/ej.widget.angular.min.js"></script>
<script src="~/Scripts/properties.js"></script>
<script src="~/App/app.js"></script>
</head>
<body ng-controller="syncFusionGridController">
<div class="content-container-fluid">
<div class="row">
<div id="search">
<label>Customername: </label><input type="text" />
<input type="button" ng-click="OnClickSetEmployeeData()" value="Get Data" />
</div>
<div class="cols-sample-area">
<div id="Grid" ej-grid e-datasource="data2" e-columns="col" e-allowgrouping="true" e-allowsorting="true">
</div>
</div>
<div>
<input type="button" ng-click="OnClickSetEmployeeData()" value="Set employee data long" />
</div>
</div>
</div>
<!-- Custom Scripts -->
<script src="~/App/Controllers/syncFusionGridController.js"></script>
</body>
</html>
app.js:
(function () {
// initialize app
var app = angular.module('app', ['ejangular']);
}());
syncFusionGridController.js: (function () {
// Sample data
var employeeList = [
{ "EmployeeID": 1, "LastName": "Davolio", "FirstName": "Nancy",
"Title": "Sales Representative", "City": "Seattle", "Country": "USA" },
{ "EmployeeID": 2, "LastName": "Fuller", "FirstName": "Andrew",
"Title": "Vice President, Sales", "City": "Tacoma", "Country": "USA" },
{ "EmployeeID": 3, "LastName": "Leverling", "FirstName": "Janet",
"Title": "Sales Representative", "City": "Kirkland", "Country": "USA" },
{ "EmployeeID": 4, "LastName": "Peacock", "FirstName": "Margaret",
"Title": "Sales Representative", "City": "Redmond", "Country": "USA" },
{ "EmployeeID": 5, "LastName": "Buchanan", "FirstName": "Steven",
"Title": "Sales Manager", "City": "London", "Country": "UK" },
{ "EmployeeID": 6, "LastName": "Suyama", "FirstName": "Michael",
"Title": "Sales Representative", "City": "London", "Country": "UK" },
{ "EmployeeID": 7, "LastName": "King", "FirstName": "Robert", "Title":
"Sales Representative", "City": "London", "Country": "UK" },
{ "EmployeeID": 8, "LastName": "Callahan", "FirstName": "Laura",
"Title": "Inside Sales Coordinator", "City": "Seattle", "Country": "USA"
},
{ "EmployeeID": 9, "LastName": "Dodsworth", "FirstName":
"Anne", "Title": "Sales Representative", "City": "London", "Country":
"UK" },
{ "EmployeeID": 4, "LastName": "Peacock",
"FirstName": "Margaret", "Title": "Sales Representative", "City":
"Redmond", "Country": "USA" },
{ "EmployeeID": 5,
"LastName": "Buchanan", "FirstName": "Steven", "Title": "Sales Manager",
"City": "London", "Country": "UK" },
{ "EmployeeID": 6,
"LastName": "Suyama", "FirstName": "Michael", "Title": "Sales
Representative", "City": "London", "Country": "UK" },
{
"EmployeeID": 7, "LastName": "King", "FirstName": "Robert", "Title":
"Sales Representative", "City": "London", "Country": "UK" },
{ "EmployeeID": 8, "LastName": "Callahan", "FirstName": "Laura",
"Title": "Inside Sales Coordinator", "City": "Seattle", "Country": "USA"
},
{ "EmployeeID": 9, "LastName": "Dodsworth", "FirstName":
"Anne", "Title": "Sales Representative", "City": "London", "Country":
"UK" },
{ "EmployeeID": 10, "LastName": "Suyama",
"FirstName": "Margaret", "Title": "Sales Representative", "City":
"London", "Country": "UK" }
];
// Sample data
var employeeList2 = [
{ "EmployeeID": 999, "LastName": "1233_Davolio", "FirstName": "Nancy",
"Title": "Sales Representative", "City": "Seattle", "Country": "USA" },
{ "EmployeeID": 999, "LastName": "1233_Fuller", "FirstName": "Andrew",
"Title": "Vice President, Sales", "City": "Tacoma", "Country": "USA" },
{ "EmployeeID": 999, "LastName": "1233_Leverling", "FirstName":
"Janet", "Title": "Sales Representative", "City": "Kirkland", "Country":
"USA" },
{ "EmployeeID": 999, "LastName": "1233_Peacock",
"FirstName": "Margaret", "Title": "Sales Representative", "City":
"Redmond", "Country": "USA" },
];
// Sample data
var customerList = [
{ "CustomerID": 999, "LastName": "1233_Davolio", "FirstName": "Nancy", "Age" : 34 },
{ "CustomerID": 999, "LastName": "1233_Fuller", "FirstName": "Andrew", "Age": 35 },
{ "CustomerID": 999, "LastName": "1233_Leverling", "FirstName": "Janet", "Age": 44 },
{ "CustomerID": 999, "LastName": "1233_Peacock", "FirstName": "Margaret", "Age": 54 },
];
// get reference to app
var app = angular.module('app');
// create new controller
app.controller('syncFusionGridController', ['$scope', function ($scope) {
// $scope.data2 = []; $scope.col = [
{ field: "EmployeeID", headerText: "EmployeeID", width: 150 },
{ field: "LastName", headerText: "LastName", width: 180 },
{ field: "FirstName", headerText: "FirstName", width: 175 },
{ field: "Title", headerText: "Title", width: 175},
{ field: "City", headerText: "City", width: 180},
{ field: "Country", headerText: "Country", width: 110 },
];
$scope.OnClickSetEmployeeData = function () {
// initializing the grid here won't work, it has to be initialized always outside any function within the controller
// as shown a few lines above with the bold code wich is commented out for now.
$scope.data2 = [];
$scope.data2 = employeeList;
}
}]);
}())
The initialization of the grid is only working if it is placed in the top
level of the angular controller function. It means that the initialization won't
work if it is for instance placed inside a callback function or promise
function (See the callback "$scope.OnClickSetEmployeeData" and
corresponding comments). Is it intended to behave like this?
