Grid: use multi-line instead of single-line textbox in edit dialog

[Alex Lyashok]

How can i turn one field into a multi-line textbox instead of input in an Add/Edit dialog?

[Rajapandi Ravi]

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 Lyashok]

thank you - and how do i specify the hight of the textarea that is added. if i do below - it just changes input tag not 

[Rajapandi Ravi]

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