Array of column objects.
Array, default = []
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:
Each column is an object with properties listed below:
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 width. 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 assigns 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.
sortMode
If set to "natural", a compare function is used that will result in an order that feels more natural to humans. This can be useful for IP addresses,
or when numbers are used in strings, so that "48" (as a string) comes after "9" (as a string) - whereas the default sorting would put it the other way round.
You can also pass a compare function in the same way you would use it as argument for Array.prototype.sort().
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.
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:date_format, where date_format is the date format, or empty for default format
- time:time_format, where time_format is the time format, or empty for default format
- datetime:date_format|time_format
- toggle
- password
You can use them int he following way:
Editable
The editable object indicates if column fields are editable. If this field is an object, then the record can be edited inline by the user. This
object is of the following structure:
With this object you can supply other properties that will be passed to $('input').w2field(column.editable) so you can
use any field type supported by w2field object. The type of the field can be one of the following:
- text
- int
- float
- hex
- money
- currency
- percent
- alphanumeric
- date
- time
- datetime
- 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.