Allow Editing

The wijgrid widget allows users to edit grid content by setting the editingMode option to cell or row. By default, its value is none. Moreover, You can use beforeCellEdit event to restrict editing of particular columns or to allow conditional editing.

For example, the script below sets the editingMode option of the third column to cell and lets a user edit only column Quantity, keeping rest of the columns uneditable. This option is useful for scenarios where you want to restrict the editability of specific columns.

Live Widget
Script

Script	Copy Code
<script type="text/javascript"> $(document).ready(function () { $('#wijgrid').wijgrid({ data: [ ['Ipsum LLC', 63.57, 209, .11, '12-21-2014'], ['Lorem Inc', 74.85, 73, .19, '09-05-2014'], ['Dolor International', 29.86, 45, .20, '04-16-2014'], ['Blandit Enterprises', 81.68, 28, .25, '05-08-2014'], ['Vivamus Services', 76.30, 67, .12, '01-29-2014'] ], columns: [ { headerText: "Product Name", dataType: 'string' }, { headerText: "Unit Price", dataType: 'currency' }, { headerText: "Quantity", dataType: 'number', dataFormatString: 'n0' }, { headerText: "Discount", dataType: 'number', dataFormatString: 'p0' }, { headerText: "Order Date", dataType: 'datetime', dataFormatString: 'dd-MMM-yyyy' } ], editingMode: 'cell', //allow editing of a single cell. beforeCellEdit : function (e, args) { return (args.cell.cellIndex() == 2); //allow editing for the cells in third column only. } }); }); </script>

Script

Copy Code

<script type="text/javascript">
    $(document).ready(function () {
        $('#wijgrid').wijgrid({
                   data: [
        ['Ipsum LLC', 63.57, 209, .11, '12-21-2014'],
        ['Lorem Inc', 74.85, 73, .19, '09-05-2014'],
        ['Dolor International', 29.86, 45, .20, '04-16-2014'],
        ['Blandit Enterprises', 81.68, 28, .25, '05-08-2014'],
        ['Vivamus Services', 76.30, 67, .12, '01-29-2014']
            ],

            columns: [
        { headerText: "Product Name", dataType: 'string' },
        { headerText: "Unit Price", dataType: 'currency' },
        { headerText: "Quantity", dataType: 'number', dataFormatString: 'n0' },
        { headerText: "Discount", dataType: 'number', dataFormatString: 'p0' },
        { headerText: "Order Date", dataType: 'datetime', dataFormatString: 'dd-MMM-yyyy' }
            ],                 
            editingMode: 'cell', //allow editing of a single cell.
            beforeCellEdit : function (e, args) {
                return (args.cell.cellIndex() == 2);
                  //allow editing for the cells in third column only.
                
            }
        });
    });
</script>