Change CELL background color when value changes - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: angular grid, Cell, cellclassname, cellendedit, column, edited cell, edited cells rendering, grid, jquery grid, jqxgrid, render

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

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

Author

Change CELL background color when value changes Posts

July 29, 2016 at 7:54 pm Change CELL background color when value changes #86199

kalel16

Participant

Hi,

I have a grid with three columns that are editable. I would like to change the background color of the Column CELL when the value changes. I DO NOT want to change the ROW style just the CELL style.

The sample below changes the styles of all the CELLS in the row when any value in any column changes.

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/editrowsrendering.htm

Is it possible to change just the CELL background without effecting all the CELLS.

August 1, 2016 at 5:32 am Change CELL background color when value changes #86211

Dimitar

Participant

Hi kalel16,

Here is how to achieve your requirement:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>The sample illustrates how to style the edited rows and keep their values in an Array.</title>
    <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">
        .editedRow {
            color: #b90f0f !important;
            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 editedCells = 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 "editedRow";
                    }
                }
            }

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

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: 'First Name', columntype: 'textbox', cellclassname: cellclass, datafield: 'firstname', width: 120, cellendedit: cellendedit },
                  { text: 'Last Name', datafield: 'lastname', cellclassname: cellclass, columntype: 'textbox', width: 120, cellendedit: cellendedit },
                  { text: 'Product', columntype: 'dropdownlist', cellclassname: cellclass, datafield: 'productname', width: 195, cellendedit: cellendedit },
                  { text: 'Available', datafield: 'available', cellclassname: cellclass, columntype: 'checkbox', width: 67, cellendedit: cellendedit },
                  {
                      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;
                      },
                      cellendedit: cellendedit
                  },
                  {
                      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 });
                      },
                      cellendedit: cellendedit
                  },
                  {
                      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 });
                      },
                      cellendedit: cellendedit
                  }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

August 9, 2016 at 2:16 am Change CELL background color when value changes #86406

kalel16

Participant

Thanks for the reply….All cells seem to be changing except for the checkbox column….when I change the checkbox column the first time the color doesn’t change…but when I click on the checkbox again the color changes.

August 9, 2016 at 2:50 am Change CELL background color when value changes #86407

kalel16

Participant

There seems to be problem with this code

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

For Checkbox columns The OLDVALUE seems to have the new value and the newvalue is always undefined. Below is the link to jsfiddle

http://jsfiddle.net/6b854whd/

August 9, 2016 at 5:37 am Change CELL background color when value changes #86408

Dimitar

Participant

Hello kalel16,

This behaviour occurs because an edit to the checkbox column does not refresh the grid and cellclassname is applied on refresh. Here is how to update your code in order to fix this issue: http://jsfiddle.net/Dimitar_jQWidgets/d5c3bp8L/.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.