jQWidgets Forums

Tagged: background, cellclassname, cellsrenderer, database, grid, jqxgrid, row

This topic contains 10 replies, has 4 voices, and was last updated by Dimitar 11 years, 3 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Change row background Posts

May 10, 2013 at 7:36 am Change row background #20909

naatha

Member

Hello All,

In my grid program, i have 20 columns. One of the column can only take values 1 or 2 or 3. Depending on these value, i want to change the entire row background color.

1 – red
2 – green
3 – blue

How can i implement this?

thanks

May 10, 2013 at 8:15 am Change row background #20923

Dimitar

Participant

Hello naatha,

Here is an example that shows how to implement such functionality, using the cellclassname callback function:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <style type="text/css">
        .redClass
        {
            background-color: Red;
        }
        .greenClass
        {
            background-color: Green;
        }
        .blueClass
        {
            background-color: Blue;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            var url = "../sampledata/products.xml";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ProductName', type: 'string' },
                    { name: 'QuantityPerUnit', type: 'int' },
                    { name: 'UnitPrice', type: 'float' },
                    { name: 'UnitsInStock', type: 'float' },
                    { name: 'Discontinued', type: 'bool' }
                ],
                root: "Products",
                record: "Product",
                id: 'ProductID',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            var redRow;
            var greenRow;
            var blueRow;
            var cellclassname = function (row, column, value, data) {
                if (data.QuantityPerUnit < 10) {
                    return "redClass";
                } else if (data.QuantityPerUnit < 20) {
                    return "greenClass";
                } else if (data.QuantityPerUnit >= 20) {
                    return "blueClass";
                };
            };
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                pageable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: 'Product Name', datafield: 'ProductName', width: 250, cellclassname: cellclassname },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 120, cellclassname: cellclassname },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 100, cellclassname: cellclassname },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100, cellclassname: cellclassname },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued', cellclassname: cellclassname },
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <span style="font-size: 12px; font-family: Verdana;">Note: To run a sample that includes
        data binding, you must open it via "http://..." protocol since Ajax makes http requests.</span>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

May 14, 2013 at 1:55 pm Change row background #21134

naatha

Member

Hi Dimitar,

Thanks for the code. But it didn’t work.

And I couldn’t understand for what the below variable declarations.

var redRow;
var greenRow;
var blueRow;

thanks

May 15, 2013 at 6:14 am Change row background #21175

Dimitar

Participant

Hi naatha,

The cellclassname callback function was added in version 2.8.3 of jQWidgets so you need to update to the latest version for this solution to work. The three unused variables are from a previous idea and they are not needed in any way.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

May 16, 2013 at 9:26 pm Change row background #21276

gtielemans

Participant

Nice addition cellclassname callback in grid.

Is it also possible to check a value of a field and then color the whole row of that field.

For example I have the field startdate end enddate,

if the startdate = 0000-00-00 then background red
if the startdate 0000-00-00 then background orange
if the enddate 0000-00-00 then background red

May 17, 2013 at 5:25 am Change row background #21309

Dimitar

Participant

Hello gtielemans,

Such functionality can be seen in the provided example:

var cellclassname = function (row, column, value, data) {
                if (data.QuantityPerUnit < 10) {
                    return "redClass";
                } else if (data.QuantityPerUnit < 20) {
                    return "greenClass";
                } else if (data.QuantityPerUnit >= 20) {
                    return "blueClass";
                };
};

Just change the QuantityPerUnit datafield with the one with date information.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

May 21, 2013 at 8:49 am Change row background #21529

gtielemans

Participant

Strange, when I try to modify/imitate your example in my grid, It works when I say:

var cellclassname = function (rowid, column, value) {
if ( rowid > 2 ) {

return “greenClass”;
} else {
return”blueClass”;
}
};

But this version fails (no grid showing):

var cellclassname = function (rowid, column, value) {
if (( rowid > 2 ) and (rowid < 5)) {

return "greenClass";
} else {
return"blueClass";
}
};

May 21, 2013 at 8:56 am Change row background #21530

Dimitar

Participant

Hi gtielemans,

Using and is incorrect. Use && as a logical operator instead:

if (( rowid > 2 ) && (rowid < 5)) {

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

May 21, 2013 at 9:28 am Change row background #21535

gtielemans

Participant

OOPS thanks,

February 13, 2014 at 6:57 am Change row background #49441

maximus2014

Participant

Hi Dimitar,

Is it possible to set background of a row to ‘color’ value in the database table? I have different color values for each record in my database.

February 14, 2014 at 7:41 am Change row background #49502

Dimitar

Participant

Hello maximus2014,

This is possible. You would have to take the value from the dataAdapter.records array. However, the cellsrenderer callback function would be more suitable than cellclassname.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.