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

column formatting example with ejGrid with angularjs

Thread ID:

Created:

Updated:

Platform:

Replies:

116912 Jun 29,2014 11:30 PM UTC Jul 7,2014 03:35 AM UTC JavaScript 3
loading
Tags: ejGrid
James
Asked On June 29, 2014 11:30 PM UTC

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?

Madhu Sudhanan P [Syncfusion]
Replied On 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>

    <script>

      

            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

                ];

            });

      

    </script>

 

 

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

Description/Usage

jquery-1.10.2.min.js

--

angular.min.js

Should be specified when angular is used

jquery.globalize.min.js

When column formatting is used.

jquery.easing.min.js

For animation purpose.

jquery.validate.min.js

For Validation purpose while performing editing.

jsrender.min.js

For rendering grid

 

Syncfusion Script files:

 

Script file

Usage

ej.web.all.min.js

Must be referred.

ej.widget.angular.min.js

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.

 

Regards,

Madhu Sudhanan. P


James
Replied On July 6, 2014 04:26 AM UTC

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

Madhu Sudhanan P [Syncfusion]
Replied On 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.

 

Regards,

Madhu Sudhanan. P


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

;