Example / Documentation on how to use a column template?

[Xander van der Merwe]

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]

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.

Thanks

[Xander van der Merwe]

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.

Thanks

[Xander van der Merwe]

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");

    $(element).ejGrid({

        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?

Thanks

[Xander van der Merwe]

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" />

     </script>

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]

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" />

        </div>

</script>

 

 

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.

 

Regards,

Madhu Sudhanan. P

 

Attachment: F116069_ab060b81.zip