Initializing the grid within an OnClickListener won't work
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?
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?
SIGN IN To post a reply.
3 Replies
AS
Alan Sangeeth S
Syncfusion Team
February 9, 2015 12:36 PM UTC
Hi Gokhan,
Thanks for using Syncfusion Products.
For your kind information, we used to set scope to control properties during the control initialization and so it is mandatory to initialize the scope variable at initial time itself.
Please refer the online documentation link that explains that the scope must be set up to initial state inside controller.
https://docs.angularjs.org/guide/controller
Please let us know if you have any queries.
Regards,
Alan Sangeeth S
GC
Gökhan Cimsir
February 11, 2015 10:25 AM UTC
Hey Ala,
Thank you very much for your fast response.
I will consider your recommendations regarding the initialization.
Best regards,
Gökhan
Thank you very much for your fast response.
I will consider your recommendations regarding the initialization.
Best regards,
Gökhan
AS
Alan Sangeeth S
Syncfusion Team
February 12, 2015 11:33 AM UTC
Hi Gokhan,
Thanks for the update.
We are happy to hear that your issue has been resolved.
Please let us know if you need any further assistance.
Regards,
Alan Sangeeth S
SIGN IN To post a reply.
- 3 Replies
- 2 Participants
-
GC Gökhan Cimsir
- Feb 6, 2015 01:10 PM UTC
- Feb 12, 2015 11:33 AM UTC
