Allow Line Break

The wijgrid widget allows you to add a line break in the cells while the cell is in editable mode for automatic text wrapping. This can be done by adding a text area in the cells as and when the cell enters into editable mode.

For example, the script below uses beforeCellEdit and afterCellEdit events and adds a text area in the cell of column0.

Live Widget
Script

Script	Copy Code
<script type="text/javascript"> $(document).ready(function () { $('#wijgrid').wijgrid({ data: [ { Column1: '1', Column2: 'John', Column3: 'US' }, { Column1: '2', Column2: 'Tom', Column3: 'Japan' }, { Column1: '3', Column2: 'Henry', Column3: 'China' } ], columns: [ { dataKey: 'Column1', headerText: 'Allow Line Break' }, { dataKey: 'Column2', headerText: 'Name' }, { dataKey: 'Column3', headerText: 'Country' } ], selectionMode: 'singleCell', editingMode: 'cell', beforeCellEdit: function (e, args) { switch (args.cell.cellIndex()) { case 0: //add text area to the cell $('<textarea />') .width('100%') .val(args.cell.value().replace(/<br>/g, '\n')) .appendTo(args.cell.container().empty()) .focus(); args.handled = true; break; } }, afterCellEdit: function (e, args) { switch (args.cell.cellIndex()) { case 0: // replace the new line character args.cell.value(args.cell.value().replace(/\n/g, '<br>')); args.cell.container().find('input').wijcombobox('destroy'); break; } } }); }); </script>

Script

Copy Code

<script type="text/javascript">
    $(document).ready(function () {
        $('#wijgrid').wijgrid({
            data: [
                { Column1: '1', Column2: 'John', Column3: 'US' },
                { Column1: '2', Column2: 'Tom', Column3: 'Japan' },
                { Column1: '3', Column2: 'Henry', Column3: 'China' }
            ],
            columns: [
                { dataKey: 'Column1', headerText: 'Allow Line Break' },
                { dataKey: 'Column2', headerText: 'Name' },
                { dataKey: 'Column3', headerText: 'Country' }
            ],
            selectionMode: 'singleCell',
            editingMode: 'cell',
            beforeCellEdit: function (e, args) {
                switch (args.cell.cellIndex()) {
                    case 0:
                        //add text area to the cell
                        $('<textarea />')
                            .width('100%')
                            .val(args.cell.value().replace(/<br>/g, '\n'))
                            .appendTo(args.cell.container().empty())
                            .focus();
                        args.handled = true;
                        break;
                }
            },
            afterCellEdit: function (e, args) {
                switch (args.cell.cellIndex()) {
                    case 0:
                        // replace the new line character
                        args.cell.value(args.cell.value().replace(/\n/g, '<br>'));
                        args.cell.container().find('input').wijcombobox('destroy');
                        break;
                }
            }
        });
    });
</script>