w2grid.records

Array of record objects.

Array, default = []

You can define records during object creation or during run-time. Generally, there are two data source types: local and remote. If you do not defined the .url property the data source is local and you can add records to the grid in the following way:

let grid = new w2grid({
    name    : 'grid',
    url     : 'server/side/path/to/records',
    columns: [
        { field: 'recid', text: 'ID', size: '50px' },
        { field: 'lname', text: 'Last Name', size: '30%' },
        { field: 'fname', text: 'First Name', size: '30%' },
        { field: 'email', text: 'Email', size: '40%' },
        { field: 'sdate', text: 'End Date', size: '120px' }
    ],
    records: [
        { recid: 1, fname: 'John', lname: 'doe', email: 'vitali@gmail.com', sdate: '1/3/2012' },
        { recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '2/4/2012' },
        { recid: 3, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/23/2012' },
        { recid: 4, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '5/3/2012' },
        { recid: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 6, fname: 'Francis', lname: 'Gatos', email: 'vitali@gmail.com', sdate: '2/5/2012' }
    ]
});

​x
 
let grid = new w2grid({
    name    : 'grid',
    url     : 'server/side/path/to/records',
    columns: [
        { field: 'recid', text: 'ID', size: '50px' },
        { field: 'lname', text: 'Last Name', size: '30%' },
        { field: 'fname', text: 'First Name', size: '30%' },
        { field: 'email', text: 'Email', size: '40%' },
        { field: 'sdate', text: 'End Date', size: '120px' }
    ],
    records: [
        { recid: 1, fname: 'John', lname: 'doe', email: 'vitali@gmail.com', sdate: '1/3/2012' },
        { recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '2/4/2012' },
        { recid: 3, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/23/2012' },
        { recid: 4, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '5/3/2012' },
        { recid: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 6, fname: 'Francis', lname: 'Gatos', email: 'vitali@gmail.com', sdate: '2/5/2012' }
    ]
});
​

After object creation you can add records either by appending them to the .records array ( do not forget to call .refresh method to update on the screen), or by using .add() method, which will add and update records on the screen.

If you defined the .url, the records will be loaded from this url overwriting any locally defined records.

xxxxxxxxxx
 
let grid = new w2grid({
    name    : 'grid',
    url     : 'server/side/path/to/records',
    columns: [
        { field: 'recid', text: 'ID', size: '50px' },
        { field: 'lname', text: 'Last Name', size: '30%' },
        { field: 'fname', text: 'First Name', size: '30%' },
        { field: 'email', text: 'Email', size: '40%' },
        { field: 'sdate', text: 'End Date', size: '120px' }
    ]
});
​

The record object

Each record object must have a recid property that uniquely identifies the record. Also it might have some other system properties: style, summary, and editable.

The following is the structure of the record object:

record = {
    recid      : null,   // unique record id
    [field-1]  : '',     // field 1
    [field-2]  : '',     // field 2
    ...
    [field-N]  : '',     // field N
    w2ui       : {
        style        : '',     // additional CSS style for <tr ...> tag  or for <td ...> tag if it is an object
        class        : '',     // additional CSS class for <tr ...> tag  or for <td ...> tag if it is an object
        summary      : false,  // indicates if it is a summary record (summary records appear on the bottom)
        editable     : true,   // indicate is record is editable (must have column.editable property set)
        expanded     : 'none', // can be true | false | 'none' | 'spinner'
        changes      : null,   // readonly, object with user changes by inline editing
        colspan      : null,   // colspan object, e.g. { field: 5, ...}
        hideCheckBox : false,  // hide checkbox for this record if grid.show.selectColumn is set
        children     : [],     // array of record objects, can have sub children
        parent_recid : null,   // (internally set, id of the parent record, when children are copied to records array)
    }
}

xxxxxxxxxx
 
record = {
    recid      : null,   // unique record id
    [field-1]  : '',     // field 1
    [field-2]  : '',     // field 2
    ...
    [field-N]  : '',     // field N
    w2ui       : {
        style        : '',     // additional CSS style for <tr ...> tag  or for <td ...> tag if it is an object
        class        : '',     // additional CSS class for <tr ...> tag  or for <td ...> tag if it is an object
        summary      : false,  // indicates if it is a summary record (summary records appear on the bottom)
        editable     : true,   // indicate is record is editable (must have column.editable property set)
        expanded     : 'none', // can be true | false | 'none' | 'spinner'
        changes      : null,   // readonly, object with user changes by inline editing
        colspan      : null,   // colspan object, e.g. { field: 5, ...}
        hideCheckBox : false,  // hide checkbox for this record if grid.show.selectColumn is set
        children     : [],     // array of record objects, can have sub children
        parent_recid : null,   // (internally set, id of the parent record, when children are copied to records array)
    }
}
​

Where "field-1", ..., "field-N" have to correspond to the field property of the columns they need to be displayed in. You can use render method of the column to create columns that have aggregates from several fields. See .columns property.

w2grid.records

The record object

User Comments