jQuery UI Widgets › Forums › Grid › Set Row color

Tagged: , , , , , ,

This topic contains 4 replies, has 4 voices, and was last updated by  dprasad54 9 years, 5 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Set Row color Posts
  • January 31, 2013 at 10:25 pm Set Row color #14463

    dke
    Participant

    Hi,

    Is it possible to set color for specific row? For example for any row that column Category has a value = “SCR” I want to set color for that row is yellow.

    Thanks.

    DKE

    February 1, 2013 at 6:20 am Set Row color #14469

    Dimitar
    Participant

    Hello DKE,

    Yes, it is possible to set the colour of the specific row by using cellsrenderer. Here is an example, based on the Disable Editing of Rows demo:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'></title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.8.2.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/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.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/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/globalization/jquery.global.js"></script>
        <script type="text/javascript" src="../../scripts/gettheme.js"></script>
        <script type="text/javascript" src="generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getTheme();
                // prepare the data
                var data = generatedata(200);
                var source =
                {
                    localdata: data,
                    datatype: "array",
                    datafields:
                    [
                        { name: 'firstname', type: 'string' },
                        { name: 'lastname', type: 'string' },
                        { name: 'productname', type: 'string' },
                        { name: 'available', type: 'bool' },
                        { name: 'quantity', type: 'number' },
                        { name: 'price', type: 'number' },
                        { name: 'date', type: 'date' }
                    ],
                    updaterow: function (rowid, rowdata, commit) {
                        // synchronize with the server - send update command   
                        commit(true);
                    }
                };
                var cellbeginedit = function (row, datafield, columntype, value) {
                    if (row == 0 || row == 2 || row == 5) return false;
                }
                var cellsrenderer = function (row, column, value, defaultHtml) {
                    if (row == 0 || row == 2 || row == 5) {
                        var element = $(defaultHtml);
                        element.css({ 'background-color': 'Yellow', 'width': '100%', 'height': '100%', 'margin': '0px' });
                        return element[0].outerHTML;
                    }
                    return defaultHtml;
                }
                var dataAdapter = new $.jqx.dataAdapter(source);
                // initialize jqxGrid
                $("#jqxgrid").jqxGrid(
                {
                    width: 670,
                    source: dataAdapter,
                    editable: true,
                    theme: theme,
                    selectionmode: 'singlecell',
                    columns: [
                      { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90, cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer },
                      { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 90, cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer },
                      { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 177, cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer },
                      { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67, cellbeginedit: cellbeginedit },
                      { text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 90, cellsalign: 'right', cellsformat: 'd', cellbeginedit: cellbeginedit,
                          validation: function (cell, value) {
                              var year = value.getFullYear();
                              if (year >= 2013) {
                                  return { result: false, message: "Ship Date should be before 1/1/2013" };
                              }
                              return true;
                          }, cellsrenderer: cellsrenderer
                      },
                      { text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right', columntype: 'numberinput',
                          validation: function (cell, value) {
                              if (value < 0 || value > 150) {
                                  return { result: false, message: "Quantity should be in the 0-150 interval" };
                              }
                              return true;
                          },
                          initeditor: function (row, cellvalue, editor) {
                              editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
                          }, cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer
                      },
                      { text: 'Price', datafield: 'price', width: 65, cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput',
                          validation: function (cell, value) {
                              if (value < 0 || value > 15) {
                                  return { result: false, message: "Price should be in the 0-15 interval" };
                              }
                              return true;
                          },
                          initeditor: function (row, cellvalue, editor) {
                              editor.jqxNumberInput({ digits: 3 });
                          }, cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer
                      }
                    ]
                });
                // events
                $("#jqxgrid").bind('cellbeginedit', function (event) {
                    var args = event.args;
                    $("#cellbegineditevent").html("Event Type: cellbeginedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
                });
                $("#jqxgrid").bind('cellendedit', function (event) {
                    var args = event.args;
                    $("#cellendeditevent").html("Event Type: cellendedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div id="jqxgrid">
            </div>
            <div style="margin-top: 30px;">
                <div id="cellbegineditevent">
                </div>
                <div style="margin-top: 10px;" id="cellendeditevent">
                </div>
            </div>
        </div>
    </body>
    </html>

    Note that checkbox columns are not affected by cellsrenderer.

    Best Regards,
    Dimitar

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

    April 23, 2015 at 4:17 pm Set Row color #70209

    jcwren
    Participant

    This solution doesn’t really work well. Without the ‘margin: 0px’, the background color is offset in the cell by the margin value. With the ‘margin: 0px’, the text in the cell is now shifted. The example you referenced, ‘Disable Editing of Rows’, only changes the text color, which doesn’t require a margin adjustment.

    April 24, 2015 at 6:08 am Set Row color #70219

    Dimitar
    Participant

    Hello jcwren,

    Cells can now easily be coloured with the cellclassname callback function, as shown in the demo Cells Styling.

    Best Regards,
    Dimitar

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

    April 24, 2015 at 10:28 am Set Row color #70233

    dprasad54
    Participant

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <title id=’Description’></title>
    <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
    <script type=”text/javascript” src=”../../scripts/jquery-1.8.2.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/jqxgrid.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.edit.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.selection.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/jqxcheckbox.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxcalendar.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxnumberinput.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxdatetimeinput.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/globalization/jquery.global.js”></script>
    <script type=”text/javascript” src=”../../scripts/gettheme.js”></script>
    <script type=”text/javascript” src=”generatedata.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {
    var theme = getTheme();
    // prepare the data
    var data = generatedata(200);
    var source =
    {
    localdata: data,
    datatype: “array”,
    datafields:
    [
    { name: ‘firstname’, type: ‘string’ },
    { name: ‘lastname’, type: ‘string’ },
    { name: ‘productname’, type: ‘string’ },
    { name: ‘available’, type: ‘bool’ },
    { name: ‘quantity’, type: ‘number’ },
    { name: ‘price’, type: ‘number’ },
    { name: ‘date’, type: ‘date’ }
    ],
    updaterow: function (rowid, rowdata, commit) {
    // synchronize with the server – send update command
    commit(true);
    }
    };

    var cellclassname = function (row, columnfield, value, data) {
    if (data.Category == “SCR”) {
    return ‘gray’;
    }
    }

    var dataAdapter = new $.jqx.dataAdapter(source);
    // initialize jqxGrid
    $(“#jqxgrid”).jqxGrid(
    {
    width: 670,
    source: dataAdapter,
    editable: true,
    theme: theme,
    selectionmode: ‘singlecell’,
    columns: [
    { text: ‘First Name’, columntype: ‘textbox’, datafield: ‘firstname’, width: 90, cellbeginedit: cellbeginedit, cellclassname: cellclassname },
    { text: ‘Last Name’, datafield: ‘lastname’, columntype: ‘textbox’, width: 90, cellbeginedit: cellbeginedit, cellclassname: cellclassname },
    { text: ‘Product’, columntype: ‘dropdownlist’, datafield: ‘productname’, width: 177, cellbeginedit: cellbeginedit, cellclassname: cellclassname },
    { text: ‘Available’, datafield: ‘available’, columntype: ‘checkbox’, width: 67, cellclassname: cellclassname },
    { text: ‘Ship Date’, datafield: ‘date’, columntype: ‘datetimeinput’, width: 90, cellsalign: ‘right’, cellsformat: ‘d’, cellclassname: cellclassname ,
    validation: function (cell, value) {
    var year = value.getFullYear();
    if (year >= 2013) {
    return { result: false, message: “Ship Date should be before 1/1/2013” };
    }
    return true;
    }, cellsrenderer: cellsrenderer
    },
    { text: ‘Quantity’, datafield: ‘quantity’, width: 70, cellsalign: ‘right’, columntype: ‘numberinput’,cellclassname: cellclassname
    validation: function (cell, value) {
    if (value < 0 || value > 150) {
    return { result: false, message: “Quantity should be in the 0-150 interval” };
    }
    return true;
    },
    initeditor: function (row, cellvalue, editor) {
    editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
    }, cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer
    },
    { text: ‘Price’, datafield: ‘price’, width: 65, cellsalign: ‘right’, cellsformat: ‘c2’, columntype: ‘numberinput’,cellclassname: cellclassname
    validation: function (cell, value) {
    if (value < 0 || value > 15) {
    return { result: false, message: “Price should be in the 0-15 interval” };
    }
    return true;
    },
    initeditor: function (row, cellvalue, editor) {
    editor.jqxNumberInput({ digits: 3 });
    }, cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer
    }
    ]
    });
    // events
    $(“#jqxgrid”).bind(‘cellbeginedit’, function (event) {
    var args = event.args;
    $(“#cellbegineditevent”).html(“Event Type: cellbeginedit, Column: ” + args.datafield + “, Row: ” + (1 + args.rowindex) + “, Value: ” + args.value);
    });
    $(“#jqxgrid”).bind(‘cellendedit’, function (event) {
    var args = event.args;
    $(“#cellendeditevent”).html(“Event Type: cellendedit, Column: ” + args.datafield + “, Row: ” + (1 + args.rowindex) + “, Value: ” + args.value);
    });
    });
    </script>
    </head>
    <body class=’default’>
    <style>

    .gray {
    color: black\9;
    background-color: gray\9;
    }

    .gray:not(.jqx-grid-cell-selected), .jqx-widget .gray:not(.jqx-grid-cell-hover) {
    color: black;
    background-color: gray !important;
    }

    </style>
    <div id=’jqxWidget’>
    <div id=”jqxgrid”>
    </div>
    <div style=”margin-top: 30px;”>
    <div id=”cellbegineditevent”>
    </div>
    <div style=”margin-top: 10px;” id=”cellendeditevent”>
    </div>
    </div>
    </div>
    </body>
    </html>

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.