We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Initializing the grid within an OnClickListener won't work

Thread ID:

Created:

Updated:

Platform:

Replies:

118164 Feb 6,2015 08:10 AM Feb 12,2015 06:33 AM JavaScript 3
loading
Tags: ejGrid
Gökhan Cimsir
Asked On February 6, 2015 08:10 AM

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?


Alan Sangeeth S [Syncfusion]
Replied On February 9, 2015 07:36 AM

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



Gökhan Cimsir
Replied On February 11, 2015 05:25 AM

Hey Ala,

Thank you very much for your fast response.

I will consider your recommendations regarding the initialization.

Best regards,
Gökhan

Alan Sangeeth S [Syncfusion]
Replied On February 12, 2015 06:33 AM

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



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;