<tr> <th data-options="field:'itemid',width:80">Item ID</th> <th data-options="field:'productid',width:100,formatter:productFormatter, editor:{ type:'combobox', options:{ valueField:'productid', textField:'name', data:products, required:true } }">Product</th> <th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">List Price</th> <th data-options="field:'unitcost',width:80,align:'right',editor:'numberbox'">Unit Cost</th> <th data-options="field:'attr1',width:250,editor:'text'">Attribute</th> <th data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">Status</th> </tr>
$(function(){ var lastIndex; $('#tt').datagrid({ toolbar:[{ text:'append', iconCls:'icon-add', handler:function(){ $('#tt').datagrid('endEdit', lastIndex); $('#tt').datagrid('appendRow',{ itemid:'', productid:'', listprice:'', unitprice:'', attr1:'', status:'P' }); lastIndex = $('#tt').datagrid('getRows').length-1; $('#tt').datagrid('selectRow', lastIndex); $('#tt').datagrid('beginEdit', lastIndex); } },'-',{ text:'delete', iconCls:'icon-remove', handler:function(){ var row = $('#tt').datagrid('getSelected'); if (row){ var index = $('#tt').datagrid('getRowIndex', row); $('#tt').datagrid('deleteRow', index); } } },'-',{ text:'GetChanges', iconCls:'icon-search', handler:function(){ var rows = $('#tt').datagrid('getChanges'); alert('changed rows: ' + rows.length + ' lines'); } }], onBeforeLoad:function(){ $(this).datagrid('rejectChanges'); }, onClickRow:function(rowIndex){ if (lastIndex != rowIndex){ $('#tt').datagrid('endEdit', lastIndex); $('#tt').datagrid('beginEdit', rowIndex); } lastIndex = rowIndex; } }); });