jQWidgets Forums

Tagged: cell color, change, grid, jqxgrid

This topic contains 4 replies, has 2 voices, and was last updated by Kavyad23 10 years, 5 months ago.

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

Author

How to change cell color in Grid Posts

September 25, 2014 at 9:13 am How to change cell color in Grid #60036

Participant

In JqxGrid, I am dynamically updating the values in Grid. In a ever cell, have to compare the previous value and current value, If any value changes that cell have to show in different color. how to do that?

September 25, 2014 at 11:01 am How to change cell color in Grid #60043

Nadezhda

Participant

Hello Kavyad23,

In the following demo you can learn how to change cell color in jqxGrid: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/editrowsrendering.htm?arctic.

Best Regards,
Nadezhda

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

September 25, 2014 at 1:15 pm How to change cell color in Grid #60054

Kavyad23

Participant

Hi nadezhda,

Its changing row, but I want to change particular cell background color, when that cell only got updated.

September 26, 2014 at 7:37 am How to change cell color in Grid #60135

Nadezhda

Participant

Hello Kavyad23,

Here is an example how to change edited cell background color:

<!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.11.1.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.sort.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/globalize.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <style type="text/css">
        .editedCell
        {
            background-color: #b90f0f !important;
            color: White;
            font-style: italic;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = generatedata(200);
            // array which keeps the indexes of the edited rows.
            var editedRows = new Array();

            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' }
                ]
            };

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

            var cellclass = function (row, datafield, value, rowdata) {
                for (var i = 0; i < editedCells.length; i++) {
                    if (editedCells[i].row == row && editedCells[i].column == datafield) {
                        return "editedCell";
                    }
                }
            }

            var cellvaluechanging = function (row, datafield, columntype, oldvalue, newvalue) {
                if (oldvalue != newvalue) {
                    editedCells.push({ row: row, column: datafield });
                }
            };
            editedCells = new Array();

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: 'First Name', columntype: 'textbox', cellclassname: cellclass, datafield: 'firstname', width: 120, cellvaluechanging: cellvaluechanging },
                  { text: 'Last Name', datafield: 'lastname', cellclassname: cellclass, columntype: 'textbox', width: 120, cellvaluechanging: cellvaluechanging },
                  { text: 'Product', columntype: 'dropdownlist', cellclassname: cellclass, datafield: 'productname', width: 195, cellvaluechanging: cellvaluechanging },
                  { text: 'Available', datafield: 'available', cellclassname: cellclass, columntype: 'checkbox', width: 67, cellvaluechanging: cellvaluechanging },
                  {
                      text: 'Ship Date', datafield: 'date', cellclassname: cellclass, columntype: 'datetimeinput', width: 110, align: 'right', cellsalign: 'right', cellsformat: 'd',
                      validation: function (cell, value) {
                          if (value == "")
                              return true;

                          var year = value.getFullYear();
                          if (year >= 2015) {
                              return { result: false, message: "Ship Date should be before 1/1/2015" };
                          }
                          return true;
                      },
                      cellvaluechanging: cellvaluechanging
                  },
                  {
                      text: 'Quantity', datafield: 'quantity', cellclassname: cellclass, width: 70, align: 'right', 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;
                      },
                      createeditor: function (row, cellvalue, editor) {
                          editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
                      },
                      cellvaluechanging: cellvaluechanging
                  },
                  {
                      text: 'Price', datafield: 'price', cellclassname: cellclass, align: 'right', 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;
                      },
                      createeditor: function (row, cellvalue, editor) {
                          editor.jqxNumberInput({ digits: 3 });
                      },
                      cellvaluechanging: cellvaluechanging
                  }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Nadezhda

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

September 30, 2014 at 3:39 am How to change cell color in Grid #60287

Kavyad23

Participant

Hi Nadezhda,

Thank you

Author

Posts

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

You must be logged in to reply to this topic.