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.

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.

  1. <script src="jquery-1.9.1.js"></script>
  2. <script type="text/javascript" src="JQXItems/jqwidgets/jqxcore.js"></script>
  3. <script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.js"></script>
  4. <script type="text/javascript" src="JQXItems/jqwidgets/jqxbuttons.js"></script>
  5. <script type="text/javascript" src="JQXItems/jqwidgets/jqxscrollbar.js"></script>
  6. <script type="text/javascript" src="JQXItems/jqwidgets/jqxlistbox.js"></script>
  7. <script type="text/javascript" src="JQXItems/jqwidgets/jqxdropdownlist.js"></script>
  8. <script type="text/javascript" src="JQXItems/jqwidgets/jqxmenu.js"></script>
  9. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.js"></script>
  10. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.filter.js"></script>
  11. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.sort.js"></script>
  12. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.selection.js"></script>
  13. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.pager.js"></script>
  14. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsresize.js"></script>
  15. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsreorder.js"></script>
  16. <script type="text/javascript" src="JQXItems/jqwidgets/jqxdatatable.js"></script>
  17. <link href="JQXItems/jqwidgets/styles/jqx.base.css" rel="stylesheet" />

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).

  1. <table id="initialTable" style="width: 300px;display:none;">
  2. <thead>
  3. <tr>
  4. <th>Firstname </th>
  5. <th>Lastname </th>
  6. <th>Debits </th>
  7. </tr>
  8. </thead>
  9. <tbody>
  10. <tr>
  11. <td>Eve </td>
  12. <td>Jackson </td>
  13. <td>94 </td>
  14. </tr>
  15. <tr>
  16. <td>Clara </td>
  17. <td>Oswald </td>
  18. <td>17 </td>
  19. </tr>
  20. <tr>
  21. <td>Benedict </td>
  22. <td>Mason </td>
  23. <td>33 </td>
  24. </tr>
  25. <tr>
  26. <td>Eve </td>
  27. <td>Jackson </td>
  28. <td>94 </td>
  29. </tr>
  30. <tr>
  31. <td>Clara </td>
  32. <td>Oswald </td>
  33. <td>17 </td>
  34. </tr>
  35. <tr>
  36. <td>Benedict </td>
  37. <td>Mason </td>
  38. <td>33 </td>
  39. </tr>
  40. <tr>
  41. <td>Eve </td>
  42. <td>Jackson </td>
  43. <td>94 </td>
  44. </tr>
  45. <tr>
  46. <td>Clara </td>
  47. <td>Oswald </td>
  48. <td>17 </td>
  49. </tr>
  50. <tr>
  51. <td>Benedict </td>
  52. <td>Mason </td>
  53. <td>33 </td>
  54. </tr>
  55. <tr>
  56. <td>Eve </td>
  57. <td>Jackson </td>
  58. <td>94 </td>
  59. </tr>
  60. <tr>
  61. <td>Clara </td>
  62. <td>Oswald </td>
  63. <td>17 </td>
  64. </tr>
  65. <tr>
  66. <td>Benedict </td>
  67. <td>Mason </td>
  68. <td>33 </td>
  69. </tr>
  70. </tbody>
  71. </table>

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

  1. <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
  2. <div id="jqxgrid">
  3. < /div>
  4. </div>

Now we will define our grid as follows.

  1. $("#jqxgrid").jqxGrid(
  2. {
  3. width: 850,
  4. autoheight: true,
  5. source: dataAdapter,
  6. columns: columnsArray,
  7. pageable: true,
  8. sortable: true,
  9. filterable: true
  10. });

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

  1. var dataAdapter = new $.jqx.dataAdapter(source);

Now we will create the source object as follows.

  1. var source = {
  2. datatype: "json",
  3. datafields: dataFieldsArray,
  4. localdata: data
  5. };

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.

  1. // select rows.
  2. var rows = $("#initialTable tbody tr");
  3. // select columns.
  4. var columns = $("#initialTable thead th");
  5. var data = [];
  6. var dataFieldsArray = [];
  7. var columnsArray = [];
  8. for (var i = 0; i < rows.length; i++)
  9. {
  10. var row = rows & #91;i];
  11. var datarow =
  12. {};
  13. for (var j = 0; j < columns.length; j++)
  14. {
  15. // get column's title.
  16. var columnName = $.trim($(columns & #91;j]).text());
  17. // select cell.
  18. var cell = $(row).find('td:eq(' + j + ')');
  19. var type = 'string';
  20. var format = '';
  21. var cellsalign = 'left';
  22. if (!isNaN(cell.text()))
  23. {
  24. type = 'number';
  25. format = 'd';
  26. cellsalign = 'right';
  27. }
  28. datarow[columnName] = $.trim(cell.text());
  29. if (i === 0)
  30. {
  31. dataFieldsArray.push(
  32. {
  33. name: columnName,
  34. type: type
  35. });
  36. columnsArray.push(
  37. {
  38. name: columnName,
  39. dataField: columnName,
  40. cellsrenderer: cellsrenderer,
  41. cellsformat: format,
  42. cellsalign: cellsalign
  43. });
  44. }
  45. }
  46. data[data.length] = datarow;
  47. }
  48. [/js]
Have you noticed that when we push the the items to the <em>columnsArray</em> we are calling the function <em>cellsrenderer</em>. This <em>cellsrenderer</em> function returns the HTML with colored data as we expected.
  1. var cellsrenderer = function(row, columnfield, value, defaulthtml, columnproperties, rowdata)
  2. {
  3. if (parseFloat(rowdata.Debits) < 30)
  4. {
  5. return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
  6. }
  7. else
  8. {
  9. return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #00ff00;">' + value + '</span>';
  10. }
  11. };

Here in this function we will get the needed things like row, columnfield, value, defaulthtml, columnproperties, rowdata as parameters and we check for the condition rowdata.Debits<30, if it is true we will apply the color #ff0000 or #00ff00.

Once the formatting is done, we are pushing the items to the arrays. Now we can see the complete code.

Complete code

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5. <title></title>
  6. <script src="jquery-1.9.1.js"></script>
  7. <script type="text/javascript" src="JQXItems/jqwidgets/jqxcore.js"></script>
  8. <script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.js"></script>
  9. <script type="text/javascript" src="JQXItems/jqwidgets/jqxbuttons.js"></script>
  10. <script type="text/javascript" src="JQXItems/jqwidgets/jqxscrollbar.js"></script>
  11. <script type="text/javascript" src="JQXItems/jqwidgets/jqxlistbox.js"></script>
  12. <script type="text/javascript" src="JQXItems/jqwidgets/jqxdropdownlist.js"></script>
  13. <script type="text/javascript" src="JQXItems/jqwidgets/jqxmenu.js"></script>
  14. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.js"></script>
  15. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.filter.js"></script>
  16. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.sort.js"></script>
  17. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.selection.js"></script>
  18. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.pager.js"></script>
  19. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsresize.js"></script>
  20. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsreorder.js"></script>
  21. <script type="text/javascript" src="JQXItems/jqwidgets/jqxdatatable.js"></script>
  22. <link href="JQXItems/jqwidgets/styles/jqx.base.css" rel="stylesheet" />
  23. <script type="text/javascript">
  24. $(document).ready(function()
  25. {
  26. var cellsrenderer = function(row, columnfield, value, defaulthtml, columnproperties, rowdata)
  27. {
  28. if (parseFloat(rowdata.Debits) < 30)
  29. {
  30. return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
  31. }
  32. else
  33. {
  34. return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #00ff00;">' + value + '</span>';
  35. }
  36. };
  37. // select rows.
  38. var rows = $("#initialTable tbody tr");
  39. // select columns.
  40. var columns = $("#initialTable thead th");
  41. var data = [];
  42. var dataFieldsArray = [];
  43. var columnsArray = [];
  44. for (var i = 0; i < rows.length; i++)
  45. {
  46. var row = rows[i];
  47. var datarow = {};
  48. for (var j = 0; j < columns.length; j++)
  49. {
  50. // get column's title.
  51. var columnName = $.trim($(columns[j]).text());
  52. // select cell.
  53. var cell = $(row).find('td:eq(' + j + ')');
  54. var type = 'string';
  55. var format = '';
  56. var cellsalign = 'left';
  57. if (!isNaN(cell.text()))
  58. {
  59. type = 'number';
  60. format = 'd';
  61. cellsalign = 'right';
  62. }
  63. datarow[columnName] = $.trim(cell.text());
  64. if (i === 0)
  65. {
  66. dataFieldsArray.push(
  67. {
  68. name: columnName,
  69. type: type
  70. });
  71. columnsArray.push(
  72. {
  73. name: columnName,
  74. dataField: columnName,
  75. cellsrenderer: cellsrenderer,
  76. cellsformat: format,
  77. cellsalign: cellsalign
  78. });
  79. }
  80. }
  81. data[data.length] = datarow;
  82. }
  83. // prepare the data
  84. var source = {
  85. datatype: "json",
  86. datafields: dataFieldsArray,
  87. localdata: data
  88. };
  89. var dataAdapter = new $.jqx.dataAdapter(source);
  90. $("#jqxgrid").jqxGrid(
  91. {
  92. width: 850,
  93. autoheight: true,
  94. source: dataAdapter,
  95. columns: columnsArray,
  96. pageable: true,
  97. sortable: true,
  98. filterable: true
  99. });
  100. });
  101. </script>
  102. </head>
  104. <body class='default'>
  105. <table id="initialTable" style="width: 300px;display:none;">
  106. <thead>
  107. <tr>
  108. <th>Firstname </th>
  109. <th>Lastname </th>
  110. <th>Debits </th>
  111. </tr>
  112. </thead>
  113. <tbody>
  114. <tr>
  115. <td>Eve </td>
  116. <td>Jackson </td>
  117. <td>94 </td>
  118. </tr>
  119. <tr>
  120. <td>Clara </td>
  121. <td>Oswald </td>
  122. <td>17 </td>
  123. </tr>
  124. <tr>
  125. <td>Benedict </td>
  126. <td>Mason </td>
  127. <td>33 </td>
  128. </tr>
  129. <tr>
  130. <td>Eve </td>
  131. <td>Jackson </td>
  132. <td>94 </td>
  133. </tr>
  134. <tr>
  135. <td>Clara </td>
  136. <td>Oswald </td>
  137. <td>17 </td>
  138. </tr>
  139. <tr>
  140. <td>Benedict </td>
  141. <td>Mason </td>
  142. <td>33 </td>
  143. </tr>
  144. <tr>
  145. <td>Eve </td>
  146. <td>Jackson </td>
  147. <td>94 </td>
  148. </tr>
  149. <tr>
  150. <td>Clara </td>
  151. <td>Oswald </td>
  152. <td>17 </td>
  153. </tr>
  154. <tr>
  155. <td>Benedict </td>
  156. <td>Mason </td>
  157. <td>33 </td>
  158. </tr>
  159. <tr>
  160. <td>Eve </td>
  161. <td>Jackson </td>
  162. <td>94 </td>
  163. </tr>
  164. <tr>
  165. <td>Clara </td>
  166. <td>Oswald </td>
  167. <td>17 </td>
  168. </tr>
  169. <tr>
  170. <td>Benedict </td>
  171. <td>Mason </td>
  172. <td>33 </td>
  173. </tr>
  174. </tbody>
  175. </table>
  176. <p style="font-family: Verdana;"> Dynamically apply colour coding in Grid </p>
  177. <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
  178. <div id="jqxgrid"> </div>
  179. </div>
  180. </body>
  182. </html>

Output

Dynamically apply colour coding in Grid
Conclusion

Did I miss anything that you may think is needed? Did you find this post useful? I hope you liked this article. Please share with me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Read this article in my blog here.
Read more articles on jQuery: