We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Edit Row Height in Grid

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

1 Reply

VA Venkatesh Ayothi Raman Syncfusion Team March 24, 2017 12:59 PM UTC

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. 


Loader.
Up arrow icon