Inline Editing

All grids support inline editing. To enable inline editing add editable object for the column you want to make editable. This object takes several parameters to control behaviour of the editable input control. You can make particular records uneditable, see example below

$(function () { $('#grid').w2grid({ name: 'grid', show: { toolbar: true, footer: true, toolbarSave: true }, columns: [ { field: 'fname', caption: 'First Name', size: '30%', sortable: true, resizable: true, editable: { type: 'text', inTag: 'maxlength=30' } }, { field: 'lname', caption: 'Last Name', size: '30%', sortable: true, resizable: true, editable: { type: 'text' } }, { field: 'age', caption: 'Age', size: '70px', style: 'text-align: center', resizable: true, editable: { type: 'int', style: 'text-align: center' } }, { field: 'sex', caption: 'Sex', size: '70px', resizable: true, style: "text-align: center", editable: { type: 'list', inTag: "maxlength=1", style: 'text-align: center' } }, { field: 'dbo', caption: 'DOB', size: '120px', resizable: true, editable: { type: 'date' } }, { field: 'email', caption: 'Email', size: '40%', resizable: true, editable: { type: 'email' } }, ], records: [ { recid: 1, fname: 'Jane', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '4/3/2012' }, { recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' }, { recid: 3, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012' }, { recid: 4, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012' }, { recid: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' }, { recid: 6, fname: 'Francis', lname: 'Gatos', email: 'jdoe@gmail.com', sdate: '4/3/2012' }, { recid: 7, fname: 'Mark', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '4/3/2012' }, { recid: 8, fname: 'Thomas', lname: 'Bahh', email: 'jdoe@gmail.com', sdate: '4/3/2012' }, { recid: 9, fname: 'Sergei', lname: 'Rachmaninov', email: 'jdoe@gmail.com', sdate: '4/3/2012', style: 'background-color: #ffcccc', editable: false } ] }); }); function showChanged() { console.log(w2ui['grid'].getChanges()); w2alert('Changed records are displayed in the console'); }