How to add new item in w2ui grid using add new button?

Question

I am using w2ui grid for first time. I want to add new item in grid. For that I show toolbarAdd is toolbar. But when I click on it nothing happens. How I add new item?

$('#grid').w2grid({
    name: 'grid',
    header: 'List of Names',
    show: {
      toolbar: true,
      footer: true,
      toolbarAdd: true,
      toolbarEdit: true,
      toolbarDelete: true,
      toolbarSave: 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' }
    ]

Answer 1

You need to implement the logic yourself.

How else would the grid know what you want to add?

For example:

function addRecord() {
    var g = w2ui['grid'].records.length;
    w2ui['grid'].add( { recid: g + 1, fname: 'Jin', lname: 'Franson', email: '[email protected]', sdate: '4/3/2012' } );
}

$('#grid').w2grid({
    name: 'grid',
    ...
    onAdd: function (event) {
        addRecord();
    },
    ...
});

You basically want to add more entries to your grid.records.

Here's another example with toolbar click handler implementation:

http://w2ui.com/web/demos/#!grid/grid-21

$('#grid').w2grid({
    name: 'grid',
    ...
    toolbar: {
        items: [
            { id: 'add', type: 'button', caption: 'Add Record', icon: 'w2ui-icon-plus' }
        ],
        onClick: function (event) {
            if (event.target == 'add') {
                w2ui.grid.add({ recid: w2ui.grid.records.length + 1 });
            }
        }
    },
    ...
});