Array of column objects. This array should be defined during the object creation, but it can be changed anytime thereafter. If you change the columns array, you will need to call .refresh() method to refresh the grid. During object creation: $('#grid').w2grid({ name : 'grid', columns: [ { field: 'recid', caption: 'ID', size: '50px' }, { field: 'lname', caption: 'Last Name', size: '30%' }, { field: 'fname', caption: 'First Name', size: '30%' }, { field: 'email', caption: 'Email', size: '40%' }, { field: 'sdate', caption: 'Start Date', size: '120px' }, { field: 'sdate', caption: 'End Date', size: '120px' } ] }); Each column is an object with properties listed below: column = { caption : '', // column caption field : '', // field name to map column to a record size : null, // size of column in px or % min : 15, // minimum width of column in px max : null, // maximum width of column in px gridMinWidth : null, // minimum width of the grid when column is visible sizeCorrected : null, // read only, corrected size (see explanation below) sizeCalculated : null, // read only, size in px (see explanation below) hidden : false, // indicates if column is hidden sortable : false, // indicates if column is sortable searchable : false, // indicates if column is searchable, bool/string: int,float,date,... resizable : true, // indicates if column is resiable hideable : true, // indicates if column can be hidden attr : '', // string that will be inside the <td ... attr> tag style : '', // additional style for the td tag render : null, // string or render function title : null, // string or function for the title property for the column cells editable : {} // editable object if column fields are editable }

Size

The size of the column (width) can be in px or %. The size of 10 or the size of '10px' will define the same column width of 10px. The size of '10%' will define 10 percent wdith. You may define some columns in px and some in % for the same grid at the same time. When .refresh() method is called it will calculate size of all columns in px and store it in .sizeCalculated property. First it assignes size to the columns that defined in px, then it will distribute the remaining width between the columns defined in %. If total sum of columns defined in percentage will be more then 100, it will correct its values and record new size in .sizeCorrected.

Render

The render function(record, [index], [column_index]) can be used to format the column data. If the function is defined then it will be executed for each cell in the column and anything this function returns will be used instead of the original column data. Using this function you can create columns that output results from multiple fields. $('#grid').w2grid({ name : 'grid', columns: [ { field: 'recid', caption: 'ID', size: '50px' }, { field: 'full-name', caption: 'Last Name', size: '60%', render: function (record) { return '<div>' + record.fname + ' ' + record.lname + '</div>'; } }, { field: 'email', caption: 'Email', size: '40%' }, { field: 'sdate', caption: 'Start Date', size: '120px' }, { field: 'sdate', caption: 'End Date', size: '120px' } ] }); There are several predefined formatters. They are (for number and float, XX - defines number of digits after dot):

• int
• float:XX, where XX is number digits after comma
• number:XX, where XX is number digits after comma
• money
• currency
• percent
• age
• date:format, where format is the date format, or empty for default format
• time:format, where format is the tim format, or empty for default format
• toggle

You can use them int he following way: $('#grid').w2grid({ name : 'grid', columns: [ { field: 'recid', caption: 'ID', size: '50px', render: 'float:2' }, { field: 'full-name', caption: 'Last Name', size: '60%' }, { field: 'email', caption: 'Email', size: '40%' }, { field: 'sdate', caption: 'Start Date', size: '120px', render: 'date' }, { field: 'sdate', caption: 'End Date', size: '120px', render: 'age' } ] });

Editable

The editable object indicates if column fields are editable. If this field is an object, then the record can be editined inline by the user. This object is of the following structure: editable = { type : 'text', // type of the field (see below) inTag : '', // text that will be inside >input ...< tag style : '', ... // you can pass additional properties to w2field object (for date, enum, etc.) } With this object you can supply other properties that will be passed to $('input').w2field(column.editable) so you can use any field type suppported by w2field object.The type of the filed can be one of the following:

• text
• int
• float
• hex
• money
• currency
• percent
• alphanumeric
• date
• time
• color
• list
• combo
• check
• checkbox
• select

Use .getChanged() method to find what records have been changed. Then, you can call .save() method to submit all changed records to the .url. You can optionally add a save button to the grid's toolbar setting show.toolbarSave to true during grid's creation.