JQuery

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.

  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">  
  3.   
  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>  
  103.   
  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>  
  181.   
  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:

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs