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. Image for the cookie policy date

column formatting example with ejGrid with angularjs

Where can i find a good example of formatting the columns in ejgrid using angularjs?

currently i can bind data useing the e-datasource and I can set the formatting using the e-columns but if I set the columns then the data does not bind. I get one or the other? What am i missing?

<div ej-grid e-datasource="fdata" e-allowsorting="true" e-columns="cols"></div>

also where is the detailed API documentation for angular support?

3 Replies

MS Madhu Sudhanan P Syncfusion Team June 30, 2014 06:15 AM UTC

Hi James,


Thanks for using Syncfusion products.


We have analyzed the code snippet and information provided and suspect that the field name in the column collection might not be available in the datasource. Could be please ensure that the fields in column collection are available in the grid datasource?


For your convenience, we have created a simple ejGrid sample using Angular and the same can be downloaded from the below location.


Sample Location: column_format.zip


Please refer the below code snippet.



<div id="Grid" ej-grid e-datasource="data" e-columns="col" e-allowpaging="true"></div>



            angular.module('GridApp', ['ejangular']).controller('GridCtrl', function ($scope) {

                $scope.data = window.gridData;

                $scope.col = [

                        { field: "OrderID", headerText: "Order ID", width: 150 },

                        { field: "CustomerID", headerText: "Customer ID", width: 180 },

                        { field: "EmployeeID", headerText: "Employee ID", width: 175 },

                        { field: "Freight", headerText: "Freight", width: 175, format: "{0:C}" },

                        { field: "OrderDate", headerText: "Order Date", width: 180, format: "{0:dd/MM/yyyy}" },

                        { field: "ShipCity", headerText: "Ship City", width: 110 },

                       {field:"EmptyColumn",headerText:"Empty Column",width:90} //This column is not available in datasource and hence no data will be bound to this column







In the above code snippet, you can see that we have used the formatting for the columns “Freight” and “OrderDate”. And the grid datasource doesn’t contain the field “EmptyColumn” and hence the “EmptyColumn” column will be rendered with no data. Could you please tell us whether this is the issue (“Empty rows in grid”) you have faced?


Please refer the below table for the script files to work with ejGrid using Angular.


External Script files:


Script file





Should be specified when angular is used


When column formatting is used.


For animation purpose.


For Validation purpose while performing editing.


For rendering grid


Syncfusion Script files:


Script file



Must be referred.


Must be referred after ej.web.all.min.js



The documentation for Angular support  will be released in our upcoming Volume 2, 2014 release. We will let you know once the documentation is available online.


Please let us know if we misunderstood your requirement and provide us more information regarding your issue. The information provided would be more helpful for us to analyze the reported issue and provide you the response as earl y as possible.



Madhu Sudhanan. P

JA James July 6, 2014 04:26 AM UTC

Thanks, that fixed it. I was missing the jquery.globalize.min.js library.

MS Madhu Sudhanan P Syncfusion Team July 7, 2014 03:35 AM UTC

Hi James,


Thanks for your update. Please get back to us if you require further assistance. We will be happy to help you out.



Madhu Sudhanan. P

Live Chat Icon For mobile
Up arrow icon