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
  1. Home
  2. Forum
  3. jQuery
  4. How to Column Template with angular

How to Column Template with angular

Hi Team,

I have searched the forum but did not get any relative topic on the same. As per the requirement I want to show FirstName-LastName in the column using angular. I understand that Column template is used for the same but I fail to understand how to achieve Column template using angular. Can you please provide working example for the same.

Say the json looks like this { FirstName: "Juned", LastName: "S" }

I want to show in the column Juned-S

The API reference and user guide provided by you guys is pretty exhaustive but I personally feel there is very less details about how to achieve using angular way. If you guys can improve on the same it will very helpful for those who are really looking forward to implement Syncfusion js using angular.

Keep up the good work! You guys rock !

Thanks,
Juned S

4 Replies
SR Sellappandi Ramu Syncfusion Team May 20, 2015 02:11 PM UTC

Hi Juned,

Thanks for using Syncfusion products.

Based on your requirement we have created a sample by using column template in Angular JS and it can be downloaded from following link location.

Sample Link: http://www.syncfusion.com/downloads/support/forum/119186/AngularJS_119186-236568480.zip

Please refer the following code snippet.

<script type="text/x-jsrender" id="columnTemplate">

<span>{{:TitleOfCourtesy}}{{:FirstName}}-{{:LastName}}</span>

</script>

</head>

<body ng-controller="regularization_controller">

<div ej-grid id="Grid" e-width="500px" e-datasource="dataManager" >

<div e-columns>

<div e-column e-field="EmployeeID" e-headertext="Employee ID" e-width="60px" e-isprimarykey="true" e-textalign="left"></div>

<div e-column e-headertext="Name" e-template="true" e-templateid='template' e-textalign="left" e-width="120"></div>

<div e-column e-field="BirthDate" e-width="120px" e-headertext="Birth Date" textalign="left" e-format="{0:MM/dd/yyyy}"></div>

<div e-column e-field="Title" e-width="120px" e-headertext="Title" textalign="left"></div>


</div>

</div>

<script>

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

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

$scope.dataManager = window.employeeView;

$scope.template = "#columnTemplate";

});
</script>


Query: If you guys can improve on the same it will very helpful for those who are really looking forward to implement Syncfusion js using angular.

We have created the improvement task for Angular JS online help documentation.

Please try the above sample and get back to us if you have any concerns.

Regards,
Sellappandi R

JS Juned S May 24, 2015 05:10 PM UTC

Hi Team,

Thank you for the example and it works great but I still have some clarifications. In the example you have provided it happens to be a static json object, what if the json object is dynamic (populated dynamically before creation of grid) and looks something like below.

obj1= { subObj1: [{
                              tableObj: { OrderID:10248, CustomerID:"VINET",EmployeeID:5,OrderDate:new Date(8364186e5),ShipName:"Vins et alcools Chevalier",ShipCity:"Reims",ShipAddress:"59 rue    de                l'Abbaye",ShipRegion:null,ShipPostalCode:"51100",ShipCountry:"France",Freight:32.38,Verified:!0   }
                           },
                              { obj2:{ } }
                           ]} }

JS Juned S May 24, 2015 05:24 PM UTC

Hi Team,

Sorry as the previous reply was incomplete as I had accidentally hit the Submit button. Please find below the complete reply.

Thank you for the example and it works great but I still have some clarifications. In the example you have provided it happens to be a static json object, what if the json object is dynamic (populated dynamically before creation of grid) and looks something like below.

obj1= { subObj1: [{
                              tableObj: [{ OrderID:10248, EmployeeID:5,OrderDate:new Date(8364186e5),ShipName:"Vins et alcools Chevalier",ShipCity:"Reims",ShipAddress:"59 rue de l'Abbaye",ShipRegion:null,ShipPostalCode:"51100",ShipCountry:"France",Freight:32.38,Verified:!0, CustomerDetails: [{CustomerID:"VINET", FirstName: "Nancy", LastName: "Davallio"}, {...}, ...]},{..}]
                  },
                              { obj2:{ } }
                  ]
      }
                           
In this case how do I show FirstName - LastName in the column using template. And if we have to process some data and then show it using column template can templateId
refer to some method where we can do some processing with data.

I have observed that if we point to json Array object syncfusion component doesn't consider it (does not render data). Is this a bug or there is something wrong with my understanding.

Can this same template concept be used with ListBox component?

Thank you for all the support!

Thank,
Juned S


SR Sellappandi Ramu Syncfusion Team May 25, 2015 12:53 PM UTC

Hi Juned,

Thanks for the update.

Query #1: In this case how do I show FirstName - LastName in the column using template. And if we have to process some data and then show it using column template can templateId.

For your kind information, we have the support for array data binding in grid but we need to specify the array data field as follows.

<div ej-grid id="Grid" e-width="500px" e-datasource="dataManager" >

<div e-columns>

….

<div e-column e-field="CustomerDetails.0.FirstName" e-width="120px" e-headertext="Title" textalign="left"></div>

….

</div>
</div>


Query #2: Refer to some method where we can do some processing with data.

We have achieved you requirement by using JS render helpers method. Please refer the following code snippet.

<script type="text/x-jsrender" id="columnTemplate">

{{>~Append(CustomerDetails)}}
</script>

<script>

….


$.views.helpers({

Append: function (args) {

name = args[0].TitleOfCourtesy + args[0].FirstName + "-" + args[0].LastName;

return name;

}


});


</script>


In the above code snippet we have appended the FirstName and LastName from customerDetails array.

For your convenience we have attached sample in below link:

Sample Link: http://www.syncfusion.com/downloads/support/forum/119186/AngularJS_Sample_119186-1270892346.zip

Query #3: Can this same template concept be used with ListBox component?

We can achieve the template concept in ListBox component using “template” property.
Please refer the below code snippet

[html]

<ul id="bookSelect" ej-listbox e-datasource="dataList" e-value="value" e-height="200px" e-template='template'></ul>

[script]

<script type="text/javascript">


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

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

$scope.dataList = window.employeeView;

$scope.value = "";

$scope.template = '${TitleOfCourtesy} ${FirstName}-${LastName}';


});


</script>


For your convenience, we have prepared a simple sample based on this and attached in thefollowing location:

Sample_Link: Sample

Please check with the given sample and let us know if you have further queries,

Regards,
Sellappandi R

Loader.
Up arrow icon