Edit Row Height in Grid

[Michael Lambert]

I have a grid with at text area that is multi-line, when viewing it is fine:


But when I go to edit, the row height reduces making editing difficult: 

How can I make the edit row height at least the same height has it was in non-edit mode (or even a little bit larger).
I'm using this as a template:

    function createNote() {
        return "<textarea class='text' >{{:DeployNotes}}</textarea>";
    }
    function readNote(args) {
        return args.val();
    }
    function writeNote(args) {
        $('.text').css("max-width", args.element.parent("td").width());
        $('.text').css("max-height", args.element.parent("td").height());
        null;
    }

Also is there a way (rather easily) to make the row height adjustable, like column with dragging?
Thanks.

Mike

[Venkatesh Ayothi Raman]

Hi Michael, 

Thanks for contacting Syncfusion support. 

We have achieved your requirement by applying setting a dynamic height which is based on the content in write event in EditTemplate. Please refer to the following code example, 

Code example: 

@Edit Tempalte functions 

function createNote() { 

        return "<textarea class='text'>{{:DeployNotes}}</textarea>"; 

    } 

    function readNote(args) { 

        return args.val(); 

    } 

    function writeNote(args) { 

        var contentHeight = $("#GridCustomerID")[0].scrollHeight.toString() + "px"; 

        $($("#GridCustomerID")[0]).css("height", contentHeight);//set textarea height based on the content  

       

        null; 

    } 

Regards, 

Venkatesh Ayothiraman.