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.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

119343 Jun 8,2015 09:38 AM Jun 13,2017 09:51 AM JavaScript 8
loading
Tags: ejGrid
Gomtesh
Asked On June 8, 2015 09:38 AM



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 [Syncfusion]
Replied On June 9, 2015 08:57 AM

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
Replied On October 7, 2015 04:41 AM

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
Replied On October 7, 2015 06:33 AM

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
Replied On October 7, 2015 06:45 AM

    $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
Replied On October 8, 2015 01:52 AM

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 [Syncfusion]
Replied On October 8, 2015 06:26 AM

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.

Gomtesh
Replied On October 19, 2015 02:09 AM

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 [Syncfusion]
Replied On October 20, 2015 02:00 AM

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.

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.

;