YouTip

# jQuery EasyUI DataGrid - Enable Inline Editing The editable feature is a recent addition to the DataGrid. It allows users to add a new row to the DataGrid. Users can also update one or more rows. This tutorial shows you how to create a DataGrid with inline editors. !(#) #### Create the DataGrid $(function(){$('#tt').datagrid({title:'Editable DataGrid',iconCls:'icon-edit',width:660,height:250,singleSelect:true,idField:'itemid',url:'datagrid_data.json',columns:[[{field:'itemid',title:'Item ID',width:60},{field:'productid',title:'Product',width:100,formatter:function(value){for(var i=0; i<products.length; i++){if (products.productid == value) return products.name;}return value;},editor:{type:'combobox',options:{valueField:'productid',textField:'name',data:products,required:true}}},{field:'listprice',title:'List Price',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}},{field:'unitcost',title:'Unit Cost',width:80,align:'right',editor:'numberbox'},{field:'attr1',title:'Attribute',width:150,editor:'text'},{field:'status',title:'Status',width:50,align:'center',editor:{type:'checkbox',options:{on: 'P',off: ''}}},{field:'action',title:'Action',width:70,align:'center',formatter:function(value,row,index){if (row.editing){var s = 'Save ';var c = 'Cancel';return s+c;} else {var e = 'Edit ';var d = 'Delete';return e+d;}}}]],onBeforeEdit:function(index,row){row.editing = true;updateActions(index);},onAfterEdit:function(index,row){row.editing = false;updateActions(index);},onCancelEdit:function(index,row){row.editing = false;updateActions(index);}});});function updateActions(index){$('#tt').datag