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.
Syncfusion Feedback

Angular support road map in 2016

Thread ID:

Created:

Updated:

Platform:

Replies:

121747 Jan 21,2016 01:51 PM UTC Jan 22,2016 02:06 PM UTC JavaScript 2
loading
Tags: ejGrid
Ricardas
Asked On January 21, 2016 01:51 PM UTC

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:
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
Replied On January 21, 2016 02:24 PM UTC

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 [Syncfusion]
Replied On January 22, 2016 02:06 PM UTC

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

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.

Warning Icon 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.Close Icon

;