Grid & Edit

The demo below features a resiabled layout with two panels, a grid and edit that are connected. You can click on the record in the grid and it will be displaed in the form. If you edit the form and click the Save button it will save records into the grid.
// widget configuration var config = { layout: { name: 'layout', padding: 4, panels: [ { type: 'left', size: '50%', resizable: true, minSize: 300 }, { type: 'main', minSize: 300 } ] }, grid: { name: 'grid', show: { toolbar : true, toolbarDelete : true }, columns: [ { field: 'fname', caption: 'First Name', size: '33%', sortable: true, searchable: true }, { field: 'lname', caption: 'Last Name', size: '33%', sortable: true, searchable: true }, { field: 'email', caption: 'Email', size: '33%' }, { field: 'sdate', caption: 'Start Date', size: '120px', render: 'date' }, ], records: [ { recid: 1, fname: 'John', 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' } ], onClick: function(event) { var grid = this; var form = w2ui.form; console.log(event); event.onComplete = function () { var sel = grid.getSelection(); console.log(sel); if (sel.length == 1) { form.recid = sel[0]; form.record = $.extend(true, {}, grid.get(sel[0])); form.refresh(); } else { form.clear(); } } } }, form: { header: 'Edit Record', name: 'form', fields: [ { name: 'recid', type: 'text', html: { caption: 'ID', attr: 'size="10" readonly' } }, { name: 'fname', type: 'text', required: true, html: { caption: 'First Name', attr: 'size="40" maxlength="40"' } }, { name: 'lname', type: 'text', required: true, html: { caption: 'Last Name', attr: 'size="40" maxlength="40"' } }, { name: 'email', type: 'email', html: { caption: 'Email', attr: 'size="30"' } }, { name: 'sdate', type: 'date', html: { caption: 'Date', attr: 'size="10"' } } ], actions: { Reset: function () { this.clear(); }, Save: function () { var errors = this.validate(); if (errors.length > 0) return; if (this.recid == 0) { w2ui.grid.add($.extend(true, { recid: w2ui.grid.records.length + 1 }, this.record)); w2ui.grid.selectNone(); this.clear(); } else { w2ui.grid.set(this.recid, this.record); w2ui.grid.selectNone(); this.clear(); } } } } } $(function () { // initialization $('#main').w2layout(config.layout); w2ui.layout.content('left', $().w2grid(config.grid)); w2ui.layout.content('main', $().w2form(config.form)); });