Blog

jQuery Templating Tips & Tricks

[Infragistics] Murtaza Abdeali / Thursday, April 21, 2011

The more I work with the jQuery templating plug-in, the more I like it. It is much more than creating constructs in HTML and binding to your client data source. A lot of complex data display tasks are made simple with using templating syntax and the ability to keep the UI view constructs separated from the core logic makes it easy to manage. In this blog, I want to share some of the tricks I learned while working with the templating plug-in for more main stream scenarios and hope you find them useful too. 

I am going to use the new Infragistics jQuery grid, but you can use these tricks with any jQuery template view. Here are the scenarios I am going to accomplish: 

• Apply conditional style to a table row based upon a field value

• Convert Raw HTML data to display as valid HTML  content within the grid cells

• Insert a checkbox column and convert data as yes/no to checked and unchecked state

• Format a date column 

Setting up the grid

First we need to setup all the css and JavaScript references that we will use for this page. We can use the CDN to pull jQuery core, jQuery UI & the templating plug-in. For the Infragistics grid, we will use the minified and gzipped version of the JavaScript file that contains all the controls and widgets in a single file. Next we need to do the same for getting the CSS setup so that our grid looks nice. 

We need a element on the page, that will turn into an Infragistics jQuery grid once we get our data, for that, we can use a simple table element and assign it an id for now. 

To display the different variations of the scenarios to cover in this blog, I created some sample data that we will use. On page load we will first create our JSON data and store into a local JavaScript object. 

    Unorderd List
  • List Item
  • List Item

Once we have our data, we can now bind it to our grid. The grid is a client side jQuery plug-in, so we can take our table element defined above, and convert it to a grid control in the same fashion as we would with any other jQuery plug-in. Notice the rowTemplate option. We are using the field names to define our template, encapsulating it within TDs and we have a nicely styled Infragistics grid bound to our client side JSON data. 

Now, we need to make the data look nice in the grid, we will use the templating tricks below to accomplish that. 

Conditional Format Rows

Let’s being with formatting rows with Rank of 1, to have a different color, so that they stand out. We will tweak our grid row template and add a class attribute to the TR, such that if the Rank is 1 it picks up a CSS class that will definie a back color for that row. We will set up a CSS class that we are going to use, we can simply do that by creating a class and setting a background-color for it. 

In the row template, we can change the TR as follows. Notice that by using two curly braces, we are able to put a conditional statement within our templates and it will only run if the condition is true. So, in our case if the Rank field is 1, then we want the row to be colored green.  

Convert Raw HTML data to display as HTML content

In phase 2, we want to take the raw data that is being displayed in the HTML columns of the data to display properly as HTML content. We can use the {{html}} tag of the template, which makes this task very simple. By doing that we now have a nice HTML content displayed within our second column of the grid. 

Using a checkbox in the template

In this section we want to make our Valid column display check boxes instead of yes/no text. We also want the check boxes to appear as checked in the value is ‘yes’, and unchecked if the value is ‘no’. To do that, we need to add some additional markup in the template to display a checkbox with a conditional statement to check for the field value and check or uncheck the box accordingly. Once we do that, our grid will not display checkboxes as you can see below. The markup for the third column’s template would look like the following. 

Format Dates

Finally, the date format that is coming from the JSON source is not the way I would like to display it to my end-users. To change the format, I am going to use an external helper method from the template, pass the actual date coming from the JSON source to my helper method, which will return me the correct format. Once I get that date, I will display that in my Date column. I just need to make a slight change to my template, add a helper method in my script block and I finally I have the grid with data, display in a way I needed.  

Final Markup

After applying all of the templating techniques above, the final grid markup is just update to the rowtemplate option. It looks like the following and are now able to change the display of grid data just by using some jQuery templating techniques. 

Conclusion

In this blog, you learned how to fully utilize the jQuery templating features. jQuery templating is quite powerful, and by using the templates and its advanced syntax capabilities, I was able to quickly setup my data structure, format and display the data in the way I wanted. jQuery templating is beyond just creating HTML constructs to display your data, it makes is very easy to build UI that can present your data in a way that is better to comprehend by your end-users all at the UI front. Ability to add conditional elements within the templates helps building dynamic HTML constructs based upon data. Using templates, you can also place methods within them to manipulate data and apply formatting or other related data operations before it is presented to the user.

I hope you enjoyed reading this article as much as I enjoyed writing it, and can take some tips from here and apply within your own applications. If you have any questions related to the Infragistics jQuery controls, feel free to reach out to me : murtazaa@infragistics.com

You can check out the sample running live, click here. To download sample code, click here.