Grid: use multi-line instead of single-line textbox in edit dialog
Hi Alex,
Greetings from Syncfusion support.
Based on your requirement, you want to render the multiline textbox control to edit a column in the Grid. You can achieve your requirement by using cellEditTemplate feature of Grid.
CellEditTemplate: https://ej2.syncfusion.com/documentation/grid/editing/edit-types/#custom-editors-using-template
The cell edit template is used to add a custom component for a particular column by invoking the following functions:
- create - It is used to create the element at the time of initialization.
- write - It is used to create custom component or assign default value at the time of editing.
- read - It is used to read the value from the component at the time of save.
- destroy - It is used to destroy the component.
MultiLine textbox: https://ej2.syncfusion.com/documentation/textbox/multiline/
|
let grid: Grid = new Grid( { dataSource: orderData, editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' }, allowPaging: true, pageSettings: {pageCount: 5}, toolbar: ['Add', 'Edit', 'Delete'], columns: [ . . . . . . . . . . . . . . . . . . . . . . . . { field: 'ShipCountry', headerText: 'Ship Country', width: 150, edit: { create: createShipAddressFn, destroy: destroyShipAddressFn, read: readShipAddressFn, write: writeShipAddressFn, } }], }); grid.appendTo('#Grid');
function createShipAddressFn() { tbElem = document.createElement('input'); return tbElem; } function destroyShipAddressFn() { textEditor.destroy(); } function readShipAddressFn() { return textEditor.value; } function writeShipAddressFn(args) { textEditor = new TextBox({ multiline: true, value: args.rowData[args.column.field], floatLabelType: 'Auto', }); textEditor.appendTo(tbElem); }
|
Sample: https://stackblitz.com/edit/bqpchb?file=index.ts
Screenshot:
Please get back to us if you need further assistance with this.
Regards,
Rajapandi R
Alex,
You can change the height of the TextArea by defining rows property in the htmlAttributes and achieve your requirement. Please refer the below code example and sample for more information.
|
function writeShipAddressFn(args) { textEditor = new TextBox({ multiline: true, htmlAttributes: { rows: '5' }, value: args.rowData[args.column.field], floatLabelType: 'Always', }); textEditor.appendTo(tbElem); }
|
Sample: https://stackblitz.com/edit/bqpchb-dhkgxz?file=index.ts
Documentation: https://ej2.syncfusion.com/documentation/api/textbox/#htmlattributes
Screenshot:
Regards,
Rajapandi R
