column formatting example with ejGrid with angularjs

[James]

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]

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]

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

[Madhu Sudhanan P]

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