change the background-color cell when a cell changes its value

[tamaraOntMember]

Hello,
How can I change the background color of a cell when It had been edited?

I have the event that detect when a cell has changed

$('#jqxgrid').bind('cellvaluechanged', function (event) {
                var column = event.args.datafield;
                var row = event.args.rowindex;
                var value = event.args.newvalue;
                var oldvalue = event.args.oldvalue;
});

I would like in that moment change the background-color cell, so the user can show easily if the cell had been changed or not.

Thanks in advance

[Peter StoevKeymaster]

Hi tamaraOnt,

You may use that approach: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/editrowsrendering.htm?web

Best Regards,
Peter Stoev

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

[tamaraOntMember]

I’m following the example, but it doesn’t work.

Here is my code

var container = $('#jqxgrid');
 var data = [{available:true, id:'1',idEntity:'1',main:1,email:'bb@bb.es',idType:'1',_idType:'Personal'}];
 var theme = 'ui-redmond';
 var editedRows = new Array();
 var source =
            {
                localdata: data,
                datatype: "array",
                async: false,
                deleterow: function (rowid, commit) {                   
                    commit(true);
                },                
                addrow: function (rowid, rowdata, position, commit) {
                    commit(true);
                },
               updaterow: function (rowid, rowdata, commit) {
                    // that function is called after each edit.
                    var rowindex = container.jqxGrid('getrowboundindexbyid', rowid);          
                    editedRows.push({ index: rowindex, data: rowdata });
                    // 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);
                }
            };
        var dataAdapter = new $.jqx.dataAdapter(source);
        var cellclass = function (row, datafield, value, rowdata) {               
            for (var i = 0; i < editedRows.length; i++) {
                if (editedRows[i].index == row) {
                    return "editedRow";
                }
            }
        }
container.jqxGrid(
            {
                width: '100%',
                autoheight: true,
                source: dataAdapter,
                theme: 'ui-redmond',
                enablehover: false,
                selectionmode: 'multiplecellsadvanced',
                columnsresize: true,
                editable: true,
                columns: [
                  {text: '', datafield: 'available', columntype: 'checkbox', width: 40, renderer: function () {
                    return '<div style="margin-left: 10px; margin-top: 5px;"></div>';
                }},
                  { text: 'id', columntype: 'textbox', datafield: 'id', cellclassname: cellclass},
                  { text: 'idEntity', columntype: 'textbox', datafield: 'idEntity', cellclassname: cellclass},
                  { text: 'main', columntype: 'textbox', datafield: 'main', cellclassname: cellclass},
                  { text: 'email', columntype: 'textbox', datafield: 'email', cellclassname: cellclass},
                  { text: 'idType', columntype: 'textbox', datafield: 'idType', cellclassname: cellclass},
                  {  text: '_idType', columntype: 'dropdownlist', datafield: '_idType',width:140, cellclassname: cellclass,
                    createeditor: function(row, cellvalue, editor)
                    {
                               var source = new Array();
                               source[0] =  {id:1, name:'personal', label: 'personal', value:'personal'};
                               source[1] =  {id:1, name:'marketing', label: 'marketing', value:'marketing'};
                             
                                 
                               var emailTypes = source;
                               var mysource =
                                {
                                    datatype: "array",
                                    datafields:
                                    [
                                        { name: 'label', type: 'string' },
                                        { name: 'value', type: 'string' }
                                    ],
                                    localdata: emailTypes
                                };
                               var myadapter = new $.jqx.dataAdapter(mysource, { autoBind: true });
                               editor.jqxDropDownList({source: myadapter, displayMember: 'label', valueMember: 'value' });
                    }
                  }
                ]
            });

In the css fle i have:

.editedRow {
    color: #b90f0f !important;
    font-style: italic;
}

[Peter StoevKeymaster]

Hi tamaraOnt,

The feature is new and requires the newest possible version.

Best Regards,
Peter Stoev

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

[tamaraOntMember]

I have it

[Peter StoevKeymaster]

Hi tamaraOnt,

In your scenario, you can do that:

                 updaterow: function (rowid, rowdata, commit) {
                    editedRows.push({ index: rowid, data: rowdata });
                    // 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);
                }

Best Regards,
Peter Stoev

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

[tamaraOntMember]

Thansk..finally it’s working

You are the best

[portabParticipant]

edit jqxrid.js and replace tex :

role=”gridcell”

for:

id=”C’+y+w+'” role=”gridcell”

Appears twice.

In your page paste this code:

$(“#jqxgrid”).on(‘cellvaluechanged’, function (event){
var colindex = $(‘#jqxgrid’).jqxGrid(‘getcolumnindex’, datafield);
var args = event.args;
var datafield = event.args.datafield;
var rowBoundIndex = args.rowindex;
var value = args.newvalue;
var oldvalue = args.oldvalue;
if(oldvalue != value ) {
document.getElementById(“C”+rowBoundIndex+colindex).style.backgroundColor = ‘green’;
}
});

The method getcolumnindex requires jqxgrid.columnsreorder.js
Regards.

[Author]

Posts