Angular support road map in 2016

[Ricardas]

Hello, I am evaluating ejGrid and other javascript/html controls for enterprise web application.

We want to use Angular. I am missing some documentation how to use Angular directives, e.g. ejGrid directive "officially" supports 3 properties (dataSource, selectedRow, pageSettings.currentPage), but I see examples with other properties binding too.

Question 1:
Do you have any plans to extend documentation regarding Angular directives? Extend directives?

Question 2:

http://jsplayground.syncfusion.com/4bvqzgh5 

Problem 1: there is some ugly code in dropdown change method, can we use Angular to omit jquery DOM selectors?

Problem 2: this example is not changing data source, as it's supposed. I am referring to this thread: https://www.syncfusion.com/forums/121560/adding-dynamic-column seems like it's a bug?

[Ricardas]

You can ignore problem 2, my main concern is documentation how to use Angular with ej controls, and how to avoid jquery access to dom elements.

[Balaji Marimuthu]

Hi Ricardas,

Thanks for contacting Syncfusion support.

Query:1 there is some ugly code in dropdown change method, can we use Angular to omit jquery DOM selectors?

We have created a sample using the angular and please refer to the sample in following link.
Sample: http://jsplayground.syncfusion.com/auttwmf2

<div class="content-container-fluid">

        <div class="row">

            <div class="cols-sample-area">

                <input id="bookSelect" ej-dropdownlist e-datasource="dataList" e-value="value" e-change="onchange" />

                <div id="Grid" ej-grid e-datasource="data" e-columns="col" e-selectedrowindex="selectedRow" e-allowgrouping="true" e-pagesettings-pagesize="8" e-pagesettings-currentpage="page" e-allowsorting="true" e-allowpaging="true" e-actionbegin="actionBegin">

                    <div e-toolbarsetting-showtoolbar=true>

                    </div>

                </div>

            </div>

    <script>

       

        var list = [

                    { text: "data1", value: "data1" },

                    { text: "data2", value: "data2" },

        ];

        var col1 = [

                        { field: "EmployeeID", isPrimaryKey: true, headerText: "EmployeeID", textAlign: ej.TextAlign.Right, width: 90 },

                        { field: "LastName", headerText: 'LastName', width: 90 },

                        { field: "FirstName", headerText: 'FirstName', textAlign: ej.TextAlign.Right, width: 75 },

                       { field: "Freight", headerText: 'Freight', textAlign: ej.TextAlign.Right, width: 75, format: "{0:C}" },

                        { field: "Title", headerText: 'Title', width: 90 },

                                         { field: "City", headerText: 'City', width: 90 }

        ];

        var col2 =

            [

                        { field: "EmployeeID", isPrimaryKey: true, headerText: "EmployeeID", textAlign: ej.TextAlign.Right, width: 90 },

                        { field: "LastName", headerText: 'LastName', width: 90 },

                        { field: "FirstName", headerText: 'FirstName', textAlign: ej.TextAlign.Right, width: 75 },

            ];
   </script>

In dropdown change event, we have changed the grid dataSource using $scope.data and columns using the $scope.col. Refer to the code example as below.

<input id="bookSelect" ej-dropdownlist e-datasource="dataList" e-value="value" e-change="onchange" />

        angular.module('listCtrl', ['ejangular'])

        .controller('PhoneListCtrl', function ($scope) {

            $scope.selectedRow = 2;

            $scope.page = 2;

            $scope.data = data1;

            $scope.dataList = list;

            $scope.col = col1;

             //dropdown change event

            $scope.onchange = function (args) {

                if (args.text == "data2") {

                    $scope.data = data2;

                    $scope.col = col2;

                }

                else {

                    $scope.data = data1;

                    $scope.col = col1;

                }

                $scope.$apply();  //apply changes

            };

        });

Note: when dynamically change the grid columns using $scope.col, we have faced the issue in previous version. So we suggest you to use the latest version 13.4.0.53.

Refer to the Demo for Angular in following link.
http://js.syncfusion.com/demos/web/#!/azure/angularsupport/Grid
http://js.syncfusion.com/demos/web/#!/azure/angularsupport/dropdownlist


Query:2 You can ignore problem 2, my main concern is documentation how to use Angular with ej controls, and how to avoid jquery access to dom elements.

We have already logged the improvement documentation for Angular and it will be published in any of our upcoming release.

Regards,
Balaji Marimuthu