Grid Elements

Any Grid consists of header, toolbar, record headers, line numbers, and footer, as well as select record and expand record columns. You can show/hide then at any time.

$(function () { $('#grid').w2grid({ name: 'grid', header: 'List of Names', url: 'data/list.json', show: { header : true, toolbar : true, footer : true, lineNumbers : true, selectColumn: true, expandColumn: true }, columns: [ { field: 'fname', caption: 'First Name', size: '30%' }, { field: 'lname', caption: 'Last Name', size: '30%' }, { field: 'email', caption: 'Email', size: '40%' }, { field: 'sdate', caption: 'Start Date', size: '120px' }, ], searches: [ { type: 'int', field: 'recid', caption: 'ID' }, { type: 'text', field: 'fname', caption: 'First Name' }, { type: 'text', field: 'lname', caption: 'Last Name' }, { type: 'date', field: 'sdate', caption: 'Start Date' } ], onExpand: function (event) { $('#'+event.box_id).html('
Expanded content
').animate({ 'height': 100 }, 100); } }); }); { "total": 9, "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" } ] }