In my last blog I mentioned that our jQuery Grids are getting a new column template option that would also be using our new high performance Templating engine and in this blog will try to expand on both templating and what can you do with it in the grids. And, yes, I keep mentioning grids because this will seamlessly work with both the flat data Grid and the Hierarchical Grid(as it would create instances of the flat grid to build its nested layouts) - you will soon be able to apply templates on every column.

Now as mentioned before, the Templating Engine functionality is integrated with multiple controls,among which are the grids. That translates in a few benefits – you get igTemplating scripts the moment you load the grid and the grid internally will call the templating function and provide data and so on. All you have to worry about is providing the template string. So the way templates work with the controls remains pretty much the same and you might not feel the change at all. When you do, though, you can start use the new column template functionality – similar to the existing row template, but rather than making a template for all the columns in the row, you can now create a template for just that one column you are interested in! That should be a step forward in terms of flexibility and getting what you need done fast.

Just a few steps

Adding in scripts

Now that is yet another subject we’ve been sharing bits here and there – for 12.1 we have a loader control that is there to handle scripts and styles for you (you can check out this blog post on using the jQuery Loader to manage resources). The best part is that it follows the dependencies of the control you need and loads them too. That should explain why this:

would result in loading those files:

Notice the templating in there? Of course the same result would be observed if you use Hierarchical Grid instead or the ASP.NET MVC wrapper:

Template strings

As mentioned above, functionality remains the same – the grid will handle templating internally and you provide the sting only. For this example let’s assume you are to display Customers (and optionally Orders) from the Northwind database and you already have a controller action exposing it. That means that in your templates you can use the data fields by name (just keep in mind it is case sensitive). Templates can be provided within or separately from the grid definition if you want to keep it neat. Let’s turn the ‘Country’ field into a flag rather than simple text:

A simple <img> tag would do the trick and the source images are actually the thumbnails from Wikimedia’s Sovereign-state flags page. While this would work for most, there are some exceptions (like UK and USA as seen in Northwind, rather than the full name used for the images) and the results are not quite there yet:

To improve on that we would use some conditional blocks to make our template flexible. The engine provides support for logic like the following:

{{if <condition1>}} <template1> {{elseif <condition2>}} <template2> {{else}} <default template> {{/if}}

And here’s the full template once we apply that:

And while still on the subject of conditional templates let’s do little trick for the column showing the customer ID. For the sake of the example lets have a special treatment for countries begging with ‘U’. How would we do that? The trick is that when you use conditional blocks, what is inside that block will be compiled as JavaScript code, unlike simple substitution that will only produce a string for a performance boost. That means you can call various functions and use JavaScript logic there:

Note the usage of ‘lastIndexOf’ method, which would compare the index of the last discovered ‘U’ char while checking only the first position in the country and in the same way this can be a custom function to perform more complicated checks. Results from the above improvements look like so:

Note the middle row displays the company name instead the the ID and the flag is now with proper source.

Besides complicated conditional logic you can also use ‘each’ block to produce the kind of template you need. Examples for that would be creating HTML list to be transformed into a tree control or select element. In both cases the loop would be required to go through all the internal items:

The default select will contain all the OrderID-s for the current record. You can drill down the hierarchy even though some of those fields might not be included in the layout(but are in the data) and you can assign various attributes to your template markup which can then be used as targets for scripts and styles. Using that technique can provide great versatility in regards to what kind of content you have in your grid (turning numbers into ratings, taking child data to create a chart, etc. ).

Setting up the grid

What is left is to add a grid to your page (flat data or a hierarchical) and use the new ‘template’ property available for column options (of course you can apply templates to the child layouts). In the definition you will see the templates defined above assigned to columns, a template applied to the child layout inline and the dataRendered event used to transform the select elements into igCombo controls:

While the logic provided to handle the selection changed on the combo is rather simplistic, it is there to mark the possibility. And the resulting grid from the definition above combined with the templates looks like this:

Conclusion

The Templating Engine provides plenty of functionality and now with column templates you can apply that just where it’s needed with familiar experience. While the snippet above uses a hierarchical grid, it is just to show it is possible to template the child layouts and the flat data grid would be templated in very much the same manner. You’ve seen some ideas on how you can make use of such features, but really what you can do with that is down to your needs and creativity!

Update: Download the demo project - an ASP.NET MVC application used as base, with two views - one where the grid is defined using the helper and one with nothing but pure script. Keep in mind you will need at least a Trial version of our jQuery controls (it's free!).