Change text filed attribute in a specific row dojo dgrid in edit mode - dojo

Question

I want to change a text field attribute in a specific row.
I have an editable dGrid with 5 fields, 2 of them are disabled and their values change when a select filed value is changed, now I want when the value of the select is changing to specific value, the two disabled filed are enabled for edit only for this row, and then be disabled again when choosing other values in the select, here's a screenshot of the grid
And here's the creation of the grid
this.productStore = new Memory({idProperty: 'id', data: []});
this.productObjStore = new ObjectStore({objectStore:
this.productStore});
var productColumn = {
field: 'productServiceId',
label: dojoConfig.i18n.productOrService,
className: 'hand',
editor: Select,
autoSave: true,
editorArgs: {
searchAttr: 'name',
labelAttr: "name",
style: 'width: 95%',
store: this.productObjStore,
required: true,
},
renderCell: function(object, data, td, options){
if(data != ''&& data != dojoConfig.i18n.addNewProduct){
td.innerHTML = this.editorArgs.store.get(data).label;
}
}
};
var quantityColumn = {
field: 'quantity',
label: dojoConfig.i18n.quantity,
className: 'hand',
editor: TextBox,
autoSave: true,
editorArgs: {
placeHolder: '#####',
regExp: dojoConfig.regExps.intExp,
trim: true,
style: 'width: 100%',
invalidMessage: dojoConfig.i18n.error_quantityIsZero,
validator: function(){
if( this.value > 0)
return true;
return false;
}
}
};
var me=this
var rateColumn = {
field: 'rate',
label: dojoConfig.i18n.rate,
className: 'hand',
editor: TextBox,
autoSave: true,
editorArgs: {
disabled: true,
placeHolder: '#####.##',
regExp: dojoConfig.regExps.floatExp,
trim: true,
style: 'width: 100%',
}
};
var amountColumn = {
field: 'amount',
label: dojoConfig.i18n.amount,
className: 'hand',
editor: TextBox,
editorArgs: {
disabled: true,
placeHolder: '#####.##',
regExp: dojoConfig.regExps.floatExp,
trim: true,
style: 'width: 100%',
}
};
this.discountStore = new Memory({idProperty: 'id', data: []});
var discountColumn = {
field: 'discount',
label: dojoConfig.i18n.lineDiscount,
className: 'hand',
editor: Select,
autoSave: true,
editorArgs: {
searchAttr: 'name',
labelAttr: "name",
style: 'width: 99%',
store: this.discountStore,
required: false,
value:null
},
renderCell: function(object, data, td, options){
if(data != '')
td.innerHTML = this.editorArgs.store.get(data).label;
}
};
this._grid = new Grid({
autoHeight: true,
showToolbar: true,
//label: dojoConfig.i18n.invoiceLines,
style: 'width: 100%; max-height: 200px; margin-top: 1px;',
columns : [
{field: 'id', label: 'ID', hidden: true, unhidable: true},
productColumn,
{field: 'description' ,label: dojoConfig.i18n.description, dismissOnEnter: false, editor: 'textarea', autoSave: true, renderCell: function(object, data, td, options){
td.innerHTML = data;
}},
quantityColumn,
rateColumn,
// discountColumn,
amountColumn,
{field: 'taxable', style:'width:50%', label: dojoConfig.i18n.taxable, editor: CheckBox, hidden: true, unhidable: true}
],
contextMenuInfo: [
{label: dojoConfig.i18n.new_, iconClass: 'newIcon', onClick: this.addProduct},
{label: dojoConfig.i18n.remove, iconClass: 'deleteIcon', onClick: this.deleteProduct, needSelection: true}
],
contextHandler: this,
selectionMode : 'single', // for Selection; only select a single row at a time
cellNavigation : false,
colspan: 5
});
this._grid.set('store', new Observable(new Memory({idProperty: 'id', data: []})));
Thanks