I have created enhanced grid in which Column1 is non editable, but user can edit other columns and can update. But when i add the new row, new row is blank and i should allow to edit and type the data in all columns. But as editable is not true for first column, i could not able to edit column1 of newly added row to give information. Please suggest how can i edit column1 for newly added blank row but not for existing row.Please find the fiddle : http://jsfiddle.net/Q9GYv/77/
Below is the code:
require(['dojo/_base/lang', 'dojox/grid/EnhancedGrid', 'dojo/data/ItemFileWriteStore', 'dijit/form/Button', 'dojo/dom', 'dojo/domReady!'],
function (lang, EnhancedGrid, ItemFileWriteStore, Button, dom) {
/*set up data store*/
var data = {
items: [{
col1 : "John",
col2 : "aa",
col3 : "bb",
col4 : "cC"
}]
};
var store = new ItemFileWriteStore({
data: data
});
/*set up layout*/
var layout = [
[{
'name': 'FirstName',
'field': 'col1',
'width': '100px'
}, {
'name': 'LastName', editable: 'true',
'field': 'col2',
'width': '100px'
}, {
'name': 'Designation',editable:'true',
'field': 'col3',
'width': '200px'
}, {
'name': 'Address',editable:'true',
'field': 'col4',
'width': '150px'
}]
];
/*create a new grid*/
var grid = new EnhancedGrid({
id: 'grid',
store: store,
structure: layout,
rowSelector: '20px',
canEdit: function(inCell, inRowIndex) {
if(inRowIndex === 0) {
return true;
}
return this._canEdit;
}
});
/*append the new grid to the div*/
grid.placeAt("gridDiv");
/*Call startup() to render the grid*/
grid.startup();
var button = new Button({
onClick: function () {
console.log(arguments);
store.newItem({
col1: "",editable:true,
col2: "",
col3: "",
col4: "New Row"
});
}
}, "addRow");
});
--EDIT--
Please suggest how can i make Column1 as editable when adding a new row and read-only when editing the existing row in the grid . Please find the fiddle http://jsfiddle.net/Q9GYv/77/ .
When creating your grid, you can override the canEdit function so that you can specify which rows cannot be modified. See below:
canEdit: function(inCell, inRowIndex) {
if(inRowIndex === 0) { //Note that you can apply any conditions you want to this
return false;
}
return this._canEdit;
}
You would also need to make your rows editable by default and I would suggest not allowing the 'id' row to be mutable as you're running a ItemFileWriteStore and that doesn't allow for changing an item's ID after it's been inserted.
I've updated your JSFiddle with these updates: http://jsfiddle.net/Q9GYv/75/
New fiddle with column 1 being uneditable for existing rows: http://jsfiddle.net/Q9GYv/78/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.