jQWidgets Forums

This topic contains 2 replies, has 2 voices, and was last updated by snowyl 11 years, 11 months ago.

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

Author

How to set edited rows fore color? Posts

June 17, 2013 at 2:33 am How to set edited rows fore color? #23225

snowyl

Member

I want set edited rows’ font to red color and then click an update button to update the rows.
var editrow =-1;
$(“#jqxgrid”).on(‘cellendedit’, function (event) {
var args = event.args;
var row=document.getElementById(eval(“row”+args.rowindex+”jqxgrid”).id);
var color=$(row).css(“color”);
if(color==”red”)
return;
if(args.oldvalue!=null&&args.value!=args.oldvalue)
{
$(row).css( “color”, “red” );
}
});

My update code is:
updaterow: function (rowid, rowdata, commit) {
if(editrow >0)
commit(true);
else
commit(false);
}

But after excuted the funchtion ,the color changed back to black. How could I just do nothing after ‘cellendedit’ ? or keep the font color red?

Thank you.

June 17, 2013 at 8:04 am How to set edited rows fore color? #23243

support

Participant

Hi snowyl,

In order to change the edited rows’ font color you can do the following things:
1. Create an Array
2. Fill the Array with the row indexes
3. Check whether the row has been changed or not
4. When the row has been changed the cellsrender would change the color

Please take a look at the following example:

<!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.9.0.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">
        var MyArray = new Array();
        $(document).ready(function () {
            var theme = getDemoTheme();
            // prepare the data
            var data = generatedata(200);
            var source =
            {
                localdata: data,
                datatype: "array",
                updaterow: function (rowid, rowdata, commit) {
                    // synchronize with the server - send update command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failder.
                    commit(true);
                },
                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 cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
                var inarray=false;
                for(var i=0;i<MyArray.length;i++){
                    if(MyArray[i] ==row)
                    {
                        inarray=true;
                    }
                }
                if (
               inarray==true
                    ) {
                    if (columnfield == "date") {
                        value = dataAdapter.formatDate(value, "d");
                    }
                    else if (columnfield == "price") {
                        value = dataAdapter.formatNumber(value, "c2");
                    }
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #0000ff;">' + value + '</span>';
                }
                else {
                    return defaulthtml;
                }
            }
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 680,
                source: dataAdapter,
                editable: true,
                theme: theme,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 80, cellsrenderer: cellsrenderer },
                  { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 80, cellsrenderer: cellsrenderer },
                  { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 195, cellsrenderer: cellsrenderer },
                 
                  { text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 110, cellsalign: 'right', cellsformat: 'd',cellsrenderer: cellsrenderer,
                  validation: function (cell, value) {
                          if (value == "")
                             return true;
                          var year = value.getFullYear();
                          if (year >= 2013) {
                              return { result: false, message: "Ship Date should be before 1/1/2013" };
                          }
                          return true;
                      }
                  },
                  { text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right', columntype: 'numberinput', cellsrenderer: cellsrenderer,
                      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 });
                      }
                  },
                  { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput', cellsrenderer: cellsrenderer,
                      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 });
                      }
                  }
                ]
            });
            // events
            $("#jqxgrid").on('cellendedit', function (event) {
                var args = event.args;
                MyArray.push(args.rowindex);
            });
       
        });
    </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>

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

June 17, 2013 at 12:26 pm How to set edited rows fore color? #23267

snowyl

Member

Thank you.

Author

Posts

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

You must be logged in to reply to this topic.