jQuery UI Widgets Forums Grid Change CELL background color when value changes

This topic contains 4 replies, has 2 voices, and was last updated by  Dimitar 5 years, 1 month ago.

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

  • 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.


    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/


    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.


    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/


    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/

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

You must be logged in to reply to this topic.