Is possible to decide dynamically form columns with alignment, width, format in syncfusion grid using angularjs

[Gomtesh]

I have to do columns in syncfusion grid should dynamically create with all its parameters using syncfusion grid by passing json data contains all information about to form grid

<div id="Grid" ej-grid e-datasource="data">

in above code all information to form a grid passing through
 $scope.data = dataforgrid;

[Ragavee U S]

Hi Gomtesh,

We have analyzed your requirement to dynamically set the alignment, width and format to the columns.

Thus we have created a sample based on the above requirement and the sample can be downloaded from the below location.

Sample Link: http://www.syncfusion.com/downloads/support/forum/119343/ze/AngularJS-579542244

In the above sample, we have set the alignment, width of the columns in the create event of the event and have passed the modified columns to the columns() method of the grid. Please refer the below code snippet.

<div id="grid" ej-grid e-datasource="data" e-create="create"></div>

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

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

                      

            $scope.data = obj;

            $scope.create = function (args) {

                var gridobj = $("#grid").ejGrid("instance");               

                for (i = 0; i < args.model.columns.length; i++)

                {                   

                    args.model.columns[i].width = 130;

                    if (args.model.columns[i].type == "number" || args.model.columns[i].type == "date") {

                        args.model.columns[i].textAlign = "right";

                        args.model.columns[i].width = 50;

                        if(args.model.columns[i].type == "date")

                            args.model.columns[i].format = "{0:MM/dd/yyyy}";

                    }                   

                }               

                gridobj.columns(args.model.columns);

            }

        });

Please try the sample and get back to us if you need any further assistance.

Regards
Ragavee U S

[Gomtesh]

Hi Gomtesh,

We have analyzed your requirement to dynamically set the alignment, width and format to the columns.

Thus we have created a sample based on the above requirement and the sample can be downloaded from the below location.

Sample Link: http://www.syncfusion.com/downloads/support/forum/119343/ze/AngularJS-579542244

In the above sample, we have set the alignment, width of the columns in the create event of the event and have passed the modified columns to the columns() method of the grid. Please refer the below code snippet.

<div id="grid" ej-grid e-datasource="data" e-create="create"></div>

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

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

                      

            $scope.data = obj;

            $scope.create = function (args) {

                var gridobj = $("#grid").ejGrid("instance");               

                for (i = 0; i < args.model.columns.length; i++)

                {                   

                    args.model.columns[i].width = 130;

                    if (args.model.columns[i].type == "number" || args.model.columns[i].type == "date") {

                        args.model.columns[i].textAlign = "right";

                        args.model.columns[i].width = 50;

                        if(args.model.columns[i].type == "date")

                            args.model.columns[i].format = "{0:MM/dd/yyyy}";

                    }                   

                }               

                gridobj.columns(args.model.columns);

            }

        });

Please try the sample and get back to us if you need any further assistance.

Regards
Ragavee U S

Hi...

As you given solution 

 gridobj.columns(args.model.columns);

but in gridobj. columns property is not present

Also i have to add columns into grid 

For that i have written :: args.model.columns.push(columnName);

but its not working so how can i add column dynamically 

[Gomtesh]

Hi Gomtesh,

We have analyzed your requirement to dynamically set the alignment, width and format to the columns.

Thus we have created a sample based on the above requirement and the sample can be downloaded from the below location.

Sample Link: http://www.syncfusion.com/downloads/support/forum/119343/ze/AngularJS-579542244

In the above sample, we have set the alignment, width of the columns in the create event of the event and have passed the modified columns to the columns() method of the grid. Please refer the below code snippet.

<div id="grid" ej-grid e-datasource="data" e-create="create"></div>

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

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

                      

            $scope.data = obj;

            $scope.create = function (args) {

                var gridobj = $("#grid").ejGrid("instance");               

                for (i = 0; i < args.model.columns.length; i++)

                {                   

                    args.model.columns[i].width = 130;

                    if (args.model.columns[i].type == "number" || args.model.columns[i].type == "date") {

                        args.model.columns[i].textAlign = "right";

                        args.model.columns[i].width = 50;

                        if(args.model.columns[i].type == "date")

                            args.model.columns[i].format = "{0:MM/dd/yyyy}";

                    }                   

                }               

                gridobj.columns(args.model.columns);

            }

        });

Please try the sample and get back to us if you need any further assistance.

Regards
Ragavee U S

Hi...

As you given solution 

 gridobj.columns(args.model.columns);

but in gridobj. columns property is not present

Also i have to add columns into grid 

For that i have written :: args.model.columns.push(columnName);

but its not working so how can i add column dynamically 

i.e i have to decide column name at run time
because column names i fetched from another API call depending result return from that API call i decide the columns of grid

[Gomtesh]

    $scope.create = function (args) {
        var userfields = ContactService.getUserDefinedFields(clientId);
        userfields.then(function (data) {
            
            var objnew = { field: data[0].FieldName, headerText: data[0].FieldName }
            $scope.columns.push(objnew);

        }, function (error) {
        });

    }


using above method  i have bind data into grid but appropriate headers are not increased headers are remains same how to increase the headers

[Gomtesh]

I have solved issue using following code

 $scope.create = function (args) {

        var userfields = ContactService.getUserDefinedFields(clientId);
        userfields.then(function (data) {
            var gridObj = $("#Grid").data("ejGrid");
            for (var i = 0; i < data.length; i++) {
                var objnew = {};
                if (data[i].FieldType == 'Date') {
                    var align = ej.TextAlign.Center;                
                }
                if (data[i].FieldType == 'Number') {
                    var align = ej.TextAlign.Right;
                }
                objnew = { field: data[i].FieldName, headerText: data[1].FieldName, textAlign: align }                        
                $scope.columns.push(objnew);
                gridObj.columns(data[i].FieldName, "add");
            }
        }, function (error) {
        });
    }

but there is error in browser console at line
gridObj.columns(data[i].FieldName, "add");

errror is:


TypeError: Cannot read property 'result' of undefined
    at Object.t.widget._ensureDataSource (ej.web.all.min.js:10)
    at Object.t.gridFeatures.common._processBindings (ej.web.all.min.js:10)
    at Object.t.gridFeatures.common.refreshContent (ej.web.all.min.js:10)
    at Object.t.gridFeatures.common.columns (ej.web.all.min.js:10)
    at $scope.create (ContactController.js:795)
    at (index):13186
    at l.c.$get.l.$eval ((index):14399)
    at l.c.$get.l.$digest ((index):14215)
    at l.c.$get.l.$apply ((index):14504)
    at l (angular.js:9644)

Due to which all other alignments are not done
 but there is error in console

[Ragavee U S]

Hi Gomtesh,

We analyzed the code snippet shared and we are sorry that we are unable to reproduce the issue at our end.

We have created a sample, which can be downloaded from the below location.

Sample Link: http://www.syncfusion.com/downloads/support/forum/119343/ze/Sample-1179574478

Could you please share the below details such that we can assist you accordingly.

1.       Product version that you are currently working on

2.       Adaptor type by which you have bound data to grid.

3.       Code snippet corresponding to data binding to grid

4.       Server side code corresponding to getting the dynamic user fields

5.       If possible, please reproduce the issue in the above sample.

Regards,
Ragavee U S.

---

GO Gomtesh October 19, 2015 06:09 AM UTC

For your convenience i have written code in JS Playground in that in databound method i have added three user defined fields that should fetched using API call but here i am directly given array of three user defined fields
i.e i have to add user defined fields in existing grid data
Link for sample is::  Sample
http://jsplayground.syncfusion.com/nlme1d25

---

RU Ragavee U S Syncfusion Team October 20, 2015 06:00 AM UTC

Hi Gomtesh,

From your last update, we understand that your requirement is to add the user defined columns to the existing grid.

In our previously provided sample, we have emptied the grid columns and rendered the grid with only the user defined columns obtained from server side. Please refer to the code example.

$scope.dataBound = function (args) {

                . . . . .

               var userfields = data;

                var gridObj = $("#Grid").data("ejGrid");

                gridObj.model.columns = [];

                for (var i = 0; i < userfields.length; i++) {

                    . .  . .

                   gridObj.columns(userfields[i].FieldName);

                }
            }

So please remove the above highlighted line from your sample code in order to add the user defined columns along with the pre rendered grid columns.

For your convenience, we have modified the jsplayground sample with the above solution, which can be downloaded from the below location.

Sample Link: http://jsplayground.syncfusion.com/robzxixm

Please refer to the following API reference link for more information on the columns method of the ejGrid.

http://help.syncfusion.com/js/api/ejgrid#methods:columns

We can also update the properties of the grid columns using the columns method of the ejGrid. Please refer to the code example.

var gridobj = $("#Editing").data("ejGrid");       

        var col = gridobj.getColumnByHeaderText("Freight"); //get the JSON object of the column corresponding to the headerText

        col.headerText = "Changed Text"; // assign a new header text to the column

        gridobj.columns(col); //pass the updated column object to the columns method

Regards,
Ragavee U S.

SIGN IN To post a reply.

• 8 Replies
• 2 Participants
• Want to subscribe?
  SIGN IN
• Created by
  GO Gomtesh
• Platform
  jQuery
• Control
  ejGrid
• Created On
  Jun 8, 2015 01:38 PM UTC
• Last Activity On
  Oct 20, 2015 06:00 AM UTC

[Gomtesh]

For your convenience i have written code in JS Playground in that in databound method i have added three user defined fields that should fetched using API call but here i am directly given array of three user defined fields
i.e i have to add user defined fields in existing grid data
Link for sample is::  Sample
http://jsplayground.syncfusion.com/nlme1d25

[Ragavee U S]

Hi Gomtesh,

From your last update, we understand that your requirement is to add the user defined columns to the existing grid.

In our previously provided sample, we have emptied the grid columns and rendered the grid with only the user defined columns obtained from server side. Please refer to the code example.

$scope.dataBound = function (args) {

                . . . . .

               var userfields = data;

                var gridObj = $("#Grid").data("ejGrid");

                gridObj.model.columns = [];

                for (var i = 0; i < userfields.length; i++) {

                    . .  . .

                   gridObj.columns(userfields[i].FieldName);

                }
            }

So please remove the above highlighted line from your sample code in order to add the user defined columns along with the pre rendered grid columns.

For your convenience, we have modified the jsplayground sample with the above solution, which can be downloaded from the below location.

Sample Link: http://jsplayground.syncfusion.com/robzxixm

Please refer to the following API reference link for more information on the columns method of the ejGrid.

http://help.syncfusion.com/js/api/ejgrid#methods:columns

We can also update the properties of the grid columns using the columns method of the ejGrid. Please refer to the code example.

var gridobj = $("#Editing").data("ejGrid");       

        var col = gridobj.getColumnByHeaderText("Freight"); //get the JSON object of the column corresponding to the headerText

        col.headerText = "Changed Text"; // assign a new header text to the column

        gridobj.columns(col); //pass the updated column object to the columns method

Regards,
Ragavee U S.