Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Dynamically Apply Color Coding in Grid With Dynamic Headers and Data

DZone's Guide to

Dynamically Apply Color Coding in Grid With Dynamic Headers and Data

In this post, we will see how we can apply colour coding dynamically to jQWidgets jQXGrid.

· Web Dev Zone
Free Resource

Add user login and MFA to your next project in minutes. Create a free Okta developer account, drop in one of our SDKs to your application and get back to building.

In this post, we will see how we can apply color coding dynamically to jQWidgets jQXGrid. Normally, a grid control can be used when you need to formulate the data either in row wise or column wise. Here in this post, we will discuss how to differentiate some rows of the grid from the other by applying some conditions over the values dynamically. We are taking an HTML table as the data source and on the client side, we will be looping through each of the columns and rows. 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, you need the following things as mandatory.

  • datafields
  • columns
  • localdata or server side data
  • So, to create/format the above-mentioned properties, I am using an another way which we will discuss in this post.

    Using the Code

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

     <script src="jquery-1.9.1.js"></script>
        <script type="text/javascript" src="JQXItems/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="JQXItems/jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="JQXItems/jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="JQXItems/jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="JQXItems/jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="JQXItems/jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.filter.js"></script>
        <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.pager.js"></script>
        <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsresize.js"></script>
        <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsreorder.js"></script>
        <script type="text/javascript" src="JQXItems/jqwidgets/jqxdatatable.js"></script>
        <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).

    <table id="initialTable" style="width: 300px;display:none;">
            <thead>
                <tr>
                    <th>Firstname
                    </th>
                    <th>Lastname
                    </th>
                    <th>Debits
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Eve
                    </td>
                    <td>Jackson
                    </td>
                    <td>94
                    </td>
                </tr>
                <tr>
                    <td>Clara
                    </td>
                    <td>Oswald
                    </td>
                    <td>17
                    </td>
                </tr>
                <tr>
                    <td>Benedict
                    </td>
                    <td>Mason
                    </td>
                    <td>33
                    </td>
                </tr>
                <tr>
                    <td>Eve
                    </td>
                    <td>Jackson
                    </td>
                    <td>94
                    </td>
                </tr>
                <tr>
                    <td>Clara
                    </td>
                    <td>Oswald
                    </td>
                    <td>17
                    </td>
                </tr>
                <tr>
                    <td>Benedict
                    </td>
                    <td>Mason
                    </td>
                    <td>33
                    </td>
                </tr>
                <tr>
                    <td>Eve
                    </td>
                    <td>Jackson
                    </td>
                    <td>94
                    </td>
                </tr>
                <tr>
                    <td>Clara
                    </td>
                    <td>Oswald
                    </td>
                    <td>17
                    </td>
                </tr>
                <tr>
                    <td>Benedict
                    </td>
                    <td>Mason
                    </td>
                    <td>33
                    </td>
                </tr>
                <tr>
                    <td>Eve
                    </td>
                    <td>Jackson
                    </td>
                    <td>94
                    </td>
                </tr>
                <tr>
                    <td>Clara
                    </td>
                    <td>Oswald
                    </td>
                    <td>17
                    </td>
                </tr>
                <tr>
                    <td>Benedict
                    </td>
                    <td>Mason
                    </td>
                    <td>33
                    </td>
                </tr>
            </tbody>
        </table>

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

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

    Now, we will define our grid as follows.

    $("#jqxgrid").jqxGrid(
                {
                    width: 850,
                    autoheight: true,
                    source: dataAdapter,
                    columns: columnsArray,
                    pageable: true,
                    sortable: true,
                    filterable: true
                });

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

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

    Now, we will create the source object as follows.

     var source =
                {
                    datatype: "json",
                    datafields: dataFieldsArray,
                    localdata: data
                };

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

    // select rows.
                var rows = $("#initialTable tbody tr");
                // select columns.
                var columns = $("#initialTable thead th");
                var data = [];
                var dataFieldsArray = [];
                var columnsArray = [];
                for (var i = 0; i < rows.length; i++) {
                    var row = rows&#91;i&#93;;
                    var datarow = {};
                    for (var j = 0; j < columns.length; j++) {
                        // get column's title.
                        var columnName = $.trim($(columns&#91;j&#93;).text());
                        // select cell.
                        var cell = $(row).find('td:eq(' + j + ')');
                        var type = 'string';
                        var format = '';
                        var cellsalign = 'left';
                        if (!isNaN(cell.text())) {
                            type = 'number';
                            format = 'd';
                            cellsalign = 'right';
                        }
                        datarow&#91;columnName&#93; = $.trim(cell.text());
                        if (i === 0) {
                            dataFieldsArray.push({ name: columnName, type: type });
                            columnsArray.push({ name: columnName, dataField: columnName, cellsrenderer: cellsrenderer, cellsformat: format, cellsalign: cellsalign });
                        }
                    }
                    data&#91;data.length&#93; = datarow;
                }
    &#91;/js&#93;
    
    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 coloured data as we expected. 
    
    
     var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                    if (parseFloat(rowdata.Debits) < 30) {
                        return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                    } else {
                        return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #00ff00;">' + value + '</span>';
                    }
                };

    Here in this function, we will get the necessary 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

    <html lang="en">
    <head>
        <title></title>
        <script src="jquery-1.9.1.js"></script>
        <script type="text/javascript" src="JQXItems/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="JQXItems/jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="JQXItems/jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="JQXItems/jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="JQXItems/jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="JQXItems/jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.filter.js"></script>
        <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.pager.js"></script>
        <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsresize.js"></script>
        <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsreorder.js"></script>
        <script type="text/javascript" src="JQXItems/jqwidgets/jqxdatatable.js"></script>
        <link href="JQXItems/jqwidgets/styles/jqx.base.css" rel="stylesheet" />
    
        <script type="text/javascript">
            $(document).ready(function () {
                var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                    if (parseFloat(rowdata.Debits) < 30) {
                        return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                    } else {
                        return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #00ff00;">' + value + '</span>';
                    }
                };
    
                // select rows.
                var rows = $("#initialTable tbody tr");
                // select columns.
                var columns = $("#initialTable thead th");
                var data = [];
                var dataFieldsArray = [];
                var columnsArray = [];
                for (var i = 0; i < rows.length; i++) {
                    var row = rows&#91;i&#93;;
                    var datarow = {};
                    for (var j = 0; j < columns.length; j++) {
                        // get column's title.
                        var columnName = $.trim($(columns&#91;j&#93;).text());
                        // select cell.
                        var cell = $(row).find('td:eq(' + j + ')');
                        var type = 'string';
                        var format = '';
                        var cellsalign = 'left';
                        if (!isNaN(cell.text())) {
                            type = 'number';
                            format = 'd';
                            cellsalign = 'right';
                        }
                        datarow&#91;columnName&#93; = $.trim(cell.text());
                        if (i === 0) {
                            dataFieldsArray.push({ name: columnName, type: type });
                            columnsArray.push({ name: columnName, dataField: columnName, cellsrenderer: cellsrenderer, cellsformat: format, cellsalign: cellsalign });
                        }
                    }
                    data&#91;data.length&#93; = datarow;
                }
    
                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: dataFieldsArray,
                    localdata: data
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
    
                $("#jqxgrid").jqxGrid(
                {
                    width: 850,
                    autoheight: true,
                    source: dataAdapter,
                    columns: columnsArray,
                    pageable: true,
                    sortable: true,
                    filterable: true
                });
            });
        </script>
    </head>
    <body class='default'>
        <table id="initialTable" style="width: 300px;display:none;">
            <thead>
                <tr>
                    <th>Firstname
                    </th>
                    <th>Lastname
                    </th>
                    <th>Debits
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Eve
                    </td>
                    <td>Jackson
                    </td>
                    <td>94
                    </td>
                </tr>
                <tr>
                    <td>Clara
                    </td>
                    <td>Oswald
                    </td>
                    <td>17
                    </td>
                </tr>
                <tr>
                    <td>Benedict
                    </td>
                    <td>Mason
                    </td>
                    <td>33
                    </td>
                </tr>
                <tr>
                    <td>Eve
                    </td>
                    <td>Jackson
                    </td>
                    <td>94
                    </td>
                </tr>
                <tr>
                    <td>Clara
                    </td>
                    <td>Oswald
                    </td>
                    <td>17
                    </td>
                </tr>
                <tr>
                    <td>Benedict
                    </td>
                    <td>Mason
                    </td>
                    <td>33
                    </td>
                </tr>
                <tr>
                    <td>Eve
                    </td>
                    <td>Jackson
                    </td>
                    <td>94
                    </td>
                </tr>
                <tr>
                    <td>Clara
                    </td>
                    <td>Oswald
                    </td>
                    <td>17
                    </td>
                </tr>
                <tr>
                    <td>Benedict
                    </td>
                    <td>Mason
                    </td>
                    <td>33
                    </td>
                </tr>
                <tr>
                    <td>Eve
                    </td>
                    <td>Jackson
                    </td>
                    <td>94
                    </td>
                </tr>
                <tr>
                    <td>Clara
                    </td>
                    <td>Oswald
                    </td>
                    <td>17
                    </td>
                </tr>
                <tr>
                    <td>Benedict
                    </td>
                    <td>Mason
                    </td>
                    <td>33
                    </td>
                </tr>
            </tbody>
        </table>
    
        <p style="font-family: Verdana;">
            Dynamically apply colour coding in Grid
        </p>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxgrid">
            </div>
        </div>
    </body>
    </html>

    Output

    Dynamically apply color coding in Grid.

    Conclusion

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

    Launch your application faster with Okta’s user management API. Register today for the free forever developer edition!

    Topics:
    html ,jquery ,javascript ,front end

    Published at DZone with permission of Sibeesh Venu, DZone MVB. See the original article here.

    Opinions expressed by DZone contributors are their own.

    {{ parent.title || parent.header.title}}

    {{ parent.tldr }}

    {{ parent.urlSource.name }}