Edit(grid, row, state)

• This is a user edit event function.
• grid number Grid object.
• row number Grid row object.
• state number Edit state. 0 : Start editing, 1 : Editing, 2 : Editing End.
• return value boolean If there is no return value, true is returned. If the return value is false, state progression stops.

Row object structure.

• Description of row object in edit function.
• row.rowIndex number Data Row Index.
• row.columnIndex number Column Index.
• row.cellIndex number Table Cell Index.
• row.columnName string Column name.
• row.value string, nubmer Column value.
• row.text string Column text.
• row.state number Edit state.
• row.newValue string, number New Value by keydown event.
• row.data json object Copyed row data.

Edit event samples

// Samples
let grid1;
$(document).ready( function() {
    grid1 = new TbsGrid('grid1');

    let columns = [
        { name: 'area',    header: { text: 'area'   }, width: 150, type: 'string', editable: true },
        { name: 'manager', header: { text: 'manager'}, width: 100, type: 'string', editable: true },
        { text: "header Text 1", children: [ // parent header column
                {name: 'amt1', header: { text: 'amt1' }, width: 100, type: 'number', editable: true },
                {name: 'amt2', header: { text: 'amt2' }, width: 100, type: 'number', editable: true } ]},
        { text: "header Text 2", children: [ // parent header column
                { name: 'amt3', header: { text: 'amt3'}, width: 100, type: 'number', editable: true },
                { text: "header Text 3", children: [
                        {name: 'amt4', header: { text: 'amt4'}, width: 100, type: 'number', editable: true },
                        {name: 'amt5', header: { text: 'amt5'}, width: 100, type: 'number', editable: true } ]}
            ]
        },
        {name: 'note', header: { text: 'note'}, width: 100, type: 'string', editable: true },
        {name: 'date', header: { text: 'date'}, width: 100, type: 'date', format: 'MM.dd/yyyy', editable: true },
        {name: 'combo', header: { text: 'combo(Nations)'}, width: 100, type: 'combo', editable: true }
    ];

    const renderer = {}
    renderer.combo = {
        data: {
            valueName: 'Language', textName: 'LanguageValue', rows: [
                {Language:  '' , LanguageValue: ''    },
                {Language:  '1', LanguageValue: 'USA' },
                {Language:  '2', LanguageValue: 'KOR' },
                {Language:  '3', LanguageValue: 'GRD' },
                {Language:  '4', LanguageValue: 'LTU' },
                {Language:  '5', LanguageValue: 'DEU' },
                {Language:  '6', LanguageValue: 'ROU' },
                {Language:  '7', LanguageValue: 'SEN' },
                {Language:  '8', LanguageValue: 'SLB' },
                {Language:  '9', LanguageValue: 'SGP' },
                {Language: '10', LanguageValue: 'GBR' },
            ]
        }
    }
    let options = {};
    grid1.setGrid(columns, options);
    grid1.setRenderer(renderer);
    grid1.setData(grid_data);
    // grid1.onClick(function(grid, row) {});
    // grid1.onDblclick(function(grid, row) {});
    grid1.onEdit = function(grid, state, row) {
        if (state == 0) {
            if (row.data['area'] == '') {
                return false;
            }
            else return true;
        }
        else if (state == 1) {
            grid.setValue(row.rowIndex, 'amt1', 40000);
            return true;
        }
        else if (state == 2) {

            return true;
        }
    }
});
$('#btn1').click(function(e){
    let userColumn = {name: 'addColumn', header: { text: 'addColumn'}, width: 100, type: 'string'}
    grid1.addColumn(userColumn, 0, 7, grid1.code_before);
    grid1.setData(grid_data);
});
$('#btn2').click(function(e){
    grid1.removeColumn(0, 8);
    grid1.setData(grid_data);
});