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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Example / Documentation on how to use a column template?

Thread ID:





116069 Mar 27,2014 08:17 AM UTC Mar 28,2014 12:27 PM UTC JavaScript 5
Tags: ejGrid
Xander van der Merwe
Asked On March 27, 2014 08:17 AM UTC

The online help for the ejGrid mentions that you can specify a template for a column like the following but it does not provide an example or futher help on how to actually do it:

columns: [
           { headerText: "Status", width: 50, columnTemplate: true, templateId: "#statusColumnTemplate" },
           { field: "StatusA", isUnBound: true},
           { field: "StatusB", isUnBound: true },
           { field: "StatusC", isUnBound: true },

In the above example, I have an unbound Status column in which I want to display 3 icons in a horizontal row representing the value of the unbound columns StatusA, statusB and StatusC respectively. Each of those statuses can have one of a number of values and the icon (or the color of the icon) will be determined by the value of that status.

So if all three statuses are OK for example, then there may be 3 x green icons in a row, if StatusC is at an alert level then there might be two green and one red icon. Assume that I have a different color icon for each of the possible statuses: Green, Yellow and Red.

How can I implement a template to render that first Status column and that can use the values of the StatusA, StatusB and StatusC columns (or any other column) in the current Row to determine the display logic?

ps. Do you have a more comprehensive ejGrid help file available?

Thanks in advance

Xander van der Merwe
Replied On March 27, 2014 08:27 AM UTC

I found this blog post covering this to some extent: http://www.syncfusion.com/blogs/post/The-Grid-control-for-JavaScript-in-ASPNET.aspx

But it does not show how to use values from the other columns to decide the display logic.

p.s. I'm using this inside LightSwitch so if there was a way to set the actual template in Javascript, rather than declaring it somewhere else in the HTML document, then that would be better. Otherwise I will try and get a work-around for that aspect.


Xander van der Merwe
Replied On March 27, 2014 08:49 AM UTC

Actually, related to the example above, I'm not sure how to use the column "isUnBound" and "visible" properties...

1/  Setting a column to invisible messes up the grid rendering - perhaps there is a bug there?
2/ Setting a column's isUnBound to True stops the grid from working - perhaps I just need to understand what this property does?

My business requirement is for the column template to use the values of columns that are both visible and invisible.


Xander van der Merwe
Replied On March 27, 2014 08:58 AM UTC

Some progress with the column template in LightSwitch - this will render XXX in the new column:

myapp.Home.OrderBrowserGrid_render = function (element, contentItem) {
    $(element).prepend('<div id="statusColumnTemplate">XXX</div>');
    $(element).attr("id", "OrdersGrid");
        dataSource: dm,
        columns: [
           { headerText: "", width: 50, columnTemplate: true, templateId: "#statusColumnTemplate" },

So the questions remain:
1/ How can I use the value of other columns or fields (visible and invisible) to drive display logic inside the template? 
2/ Why does setting the column visible flag to false mess up the grid rendering?
3/ How does the column isUnBound work - what does it mean and why does the grid stop working when I set it to true?


Xander van der Merwe
Replied On March 27, 2014 11:40 PM UTC

Some progress. If I follow the example from your gridcolumntemplate.html sample application, I can use the following column template syntax to refer to any column within the current row:

     <script type="text/x-jsrender" id="columnTemplate">
                    <img style="width: 75px; height: 70px" src="../themes/images/Employees/{{:EmployeeID}}.png" />

That is quite useful, but does not allow any conditional logic around column values to construct the image name. Are there any additional constructs to you javascript template engine that might help? 

Madhu Sudhanan P [Syncfusion]
Replied On March 28, 2014 12:27 PM UTC

Hi Xander,


Please find the response.


Query: “How can I use the value of other columns or fields (visible and invisible) to drive display logic inside the template?“


Based on the request, we have created a simple sample, please find the sample from the attachment.


In the provided sample, we have a template column named “Status Class” and another two non-template columns “StatusA” and “StatusB. We have rendered the template column based on the value of two non-template columns. The template used in the column Status Class is as follows



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

        <div class="img-container">

            <img src="images/{{:StatusA}}.png" alt="Status A" title="Status A" />

            <img src="images/{{:StatusB}}.png" alt="Status B" title="Status B" />





We have used Batch editing and when value in the column StatusA or StatusB is changed, then the images in the column template will be changed using the cellSave event. Please refer the below code snippet.



function ChangeStatus(args) { //Function called using cellSave events

            var rowIndex = args.cell.closest("tr").index();

            var gridObj = $("#Grid").data("ejGrid");

            var temp = $.templates($("#columnTemp1").html());

            args.rowData[args.columnName] = args.value;

            $(args.cell.closest("tr").get(0).childNodes[1]).html(temp.render(args.rowData)); //Set the template column value

            gridObj.setCellValue(rowIndex, args.columnName, args.value);




Query:  “Why does setting the column visible flag to false mess up the grid rendering?


We have logged this as issue and the fix for this issue will be available in our upcoming Volume 1, 2014 release. But now we can provided the work around solution to resolve this “column mess up” issue by referring bootstrap.css in the sample.


Query: “How does the column isUnBound work - what does it mean and why does the grid stop working when I set it to true?


The data you display in the Grid control will normally come from a data source of some kind, but you might want to display a column of data that does not come from the data source. This kind of column is called an unbound column.


Unbound columns are used to display custom content in the grid. For example, if you want to display some new columns like buttons to other parts of the grid, this feature will be useful.


The Unbound column must have the command property. We have checked your code snippet and suspect that  you have not used the command property hence it stopped the grid rendering. For more details about command property, please refer the following online documentation and sample links.


Documentation :  http://help.syncfusion.com/ug/js/Documents/commands.htm


Online sample :  http://js.syncfusion.com/demos/#!/azure/grid/Editing/Command%20Column


Please let us know if you have any queries.



Madhu Sudhanan. P


Attachment: F116069_ab060b81.zip


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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