CODEWITHSUNDEEP
dojogrid
user3284850
user3284850

Reputation: 21

Dynamically changing color of a cell in Dojo grid based on change of value

I have a dojo grid, which has mainly 4 columns. Grid is initially empty.

below is my Grid Layout

var gridLayout = [{
                    defaultCell: { width: '8%', editable: true, type: dojox.grid.cells._Widget, styles: 'text-align: right;'  },
                    rows: [
                        { name: 'Item Id', field: 'ItemId',hidden:true},
                        { name: 'Type', field: 'LineType', width: '8%',  type: dojox.grid.cells.Select,styles: 'text-align: center;'},
                        { name: 'Amount', field: 'Amount', width: '8%', styles: 'text-align: center;', type: dojox.grid.cells.TextBox},
                        { name: 'Code', field: 'Code', width: '8%', styles: 'text-align: center;',formatter:changeCodeColor, type: dojox.grid.cells.TextBox}
                    ]
                }];

On click of Add Line Items button in the form i fetch items from Server with value in Amount cell as Empty, but type and code is auto populated. If user changes value in Code cell I need to change color of code. Below is the function i wrote

function changeCodeColor(code, rowIndex, cell) 
{
    var codeDetails = validateCode(code)
    if(!codeDetails)
    {
        cell.customStyles.push('color:red');;
    }
    return code; 
  }

validateCode functions checks in server if code is valid or not. If code is not valid or it not available iam setting color as red.

But the problem is this code executes everytime a value is populated (i.e manual change as well as when system adds automatically). I need to do validation only when user changes manually.

Any help would be useful

Upvotes: 0

Views: 1474

Answers (1)

springrolls
springrolls

Reputation: 1331

Formatter is used to define how the data from your store should be displayed. For event handler, you should use onCellClick event from DataGrid like this,

var grid = new Grid({
    store: store,
    selectionMode: 'single',
    structure: [[
        { field: 'name', name: 'Name' }
    ]]}, dojo.byId("grid"));
grid.startup();

dojo.connect(grid, "onCellClick", function(e) {
    var dataItem = grid.selection.getSelected();
    console.dir(dataItem);
});

Upvotes: 1

Related Questions