Dynamically Apply Color Coding In Grid With Dynamic Headers And Data

Normally a grid control can be used when you need to formulate the data either in rows or columns. Here in this post we will discuss how to differentiate some rows of the grid from others by applying some conditions over the values dynamically. We are taking an HTML table as the data source and in the client side we will be looping through each column and row. If you are new to JQX Grid, you can see some tips here. I hope you will like this.

Background

If you are aware of the header column names and the data (static data), you can apply the color coding in a simple way as shown in this link. There we are using a property called cellclassname to fire an external function which returns the colored HTML in return.

But in my case, the situation was different. The data source (HTML table here) was dynamic, hence I could not predict the header names and the data. As you know, to load a jQWidget JQX Grid, there the following things are mandatory.

• datafields
• columns
• localdata or server side data

So to create/format the above mentioned properties, I am using another way which we will discuss in this post.

Using the code

First of all, load the needed references. You can download the needed files from here.

Now, we will create the HTML data. To make the processes easy, here I am going to paste a static HTML table (This table was dynamic for me).

Then it is time to say where you need to bind the grid.

Now we will define our grid as follows.

As you can see we have applied dataAdapter as the source, below is the definition for your data adapter.

Now we will create the source object as follows.

As the grid definition is over, we can create our data, datafields, and columns. Shall we? As I said earlier, our data source is a HTML table. We are looping through the trs to create the data and ths to create the datafields and columns.