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
  1. Home
  2. Forum
  3. ASP.NET MVC
  4. Multiline Edit textbox in Grid.

Multiline Edit textbox in Grid.

The grid displays multi-line text fine, but when you do in-line editing its only a single textbox which make it difficult to add long text.  Is there a way to have textbox default to a specific width and height using a multi-line edit box?

Mike

11 Replies
PK Prasanna Kumar Viswanathan Syncfusion Team November 17, 2016 12:49 PM UTC

Hi Mike, 

Thanks for contacting Syncfusion support. 

To have multiline input text box in editing,  use textarea html control in the inline editing of grid. It is achieved by the editTemplate property.  

In EditTemplate Create event we will create the textarea element for CustomerID column. 
 
Find the code example, screenshot and sample:  
 
 
@(Html.EJ().Grid<Sample118577.OrdersView>("FlatGrid") 
------------------------------------- 
.Columns(col => 
{ 
    ------------------------ 
    col.Field("CustomerID").HeaderText("Customer ID").EditTemplate(a => { a.Create("create").Read("read").Write("write"); }).TextAlign(TextAlign.Left).Width(90).ValidationRules(v => v.AddRule("required", true)).Add(); 
    ------------------------------------ 
}) 
) 
 
<script> 
    function create() { 
        return "<textarea>{{:CustomerID}}</textarea>"; 
    } 
 
    function read(args) { 
        return args.val(); 
    } 
 
------------- 
</script> 
 
 
Screenshot:  
 
 
 

Regards, 
Prasanna Kumar N.S.V 
 


ML Michael Lambert November 17, 2016 05:38 PM UTC

Hi Prasanna,

It works, sort of.  See below, it doesn't fit properly in the column and bleeds into the next column.  How do I correct that?  Also is there anyway to make the textarea sizing tab in the lower right work and allow the user to size the field/column height/width on the fly using that?  This is not a huge issue, but if simple to accomplish or have a sample that you could pass it along, I'd also appreciate it.
Thanks,




FS Farveen Sulthana Thameeztheen Basha Syncfusion Team November 18, 2016 05:07 PM UTC

Hi Michael, 
  
We have analyzed your query and we can prevent the textarea from stretching beyond the column by using textarea css property “max-width” and “max-height”. To fit the textarea into the column properly,  you have to assign that td’s width and height into the textarea’s max-width and max-height property so that you can resolve the issue. 
  
Please refer the code snippet:- 
  
function create() { 
        return "<textarea class='text' >{{:CustomerID}}</textarea>"; 
    } 
function write(args) { 
        $('.text').css("max-width", args.element.parent("td").width());   
        $('.text').css("max-height", args.element.parent("td").height()); 
       null; 
} 
    
  
 
  
Please refer the attached sample according to your requirement:- 
 
  
Regards, 
  
Farveen.T 


ML Michael Lambert December 14, 2016 09:54 PM UTC

Is there anyway to make the sizing corner (lower left) be functional.  if a user grabs/drags it, the column dynamically changes height/width?

PK Prasanna Kumar Viswanathan Syncfusion Team December 15, 2016 01:31 PM UTC

Hi Michael, 

If you need to change the height and width of the textarea while dragging, use the jQuery resize event of textarea. In this event we can able to get the width of the textarea in arguments and change the width of the columns. 

Find the code example:  


@(Html.EJ().Grid<object>("FlatGrid") 
------------------------------ 
.Columns(col => 
{ 
    ---------------------------- 
}) 
) 
 
<script> 
    function create() { 
        return "<textarea class='text'>{{:CustomerID}}</textarea>"; 
    } 
 
    function read(args) { 
        return args.val(); 
    } 
 
    function write(args) { 
        ------------------------------------ 
       $('.text').resizable({ 
            resize: function (e) { 
                var grid = $("#FlatGrid").ejGrid("instance"); 
                var colgroup = grid.element.find("colgroup"); 
                var width = parseInt(this.style.width) - grid.model.columns[2].width; 
                for (var i = 0 ; i < colgroup.length ; i++) { 
                    $($(colgroup[i]).children()[1]).css("width", width); 
                } 
            } 
        }); 
    } 

Regards, 
Prasanna Kumar N.S.V 
 


ML Michael Lambert December 15, 2016 08:07 PM UTC

When try that, I get the follow error?  Sorry rather new to jQuery..



PK Prasanna Kumar Viswanathan Syncfusion Team December 16, 2016 08:14 AM UTC

Hi Michael, 

To use jQuery resize event of textarea, we need to refer the below the css and script file in your sample. 


<link rel="stylesheet" rel='nofollow' href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" /> 
 
------------------------------------------------- 



Regards, 
Prasanna Kumar N.S.V 


ML Michael Lambert December 16, 2016 06:52 PM UTC

Getting there, but when I use the resized handle of the textbox, which is in Column 20, column 0 is the one that resizes not Column 20??

PK Prasanna Kumar Viswanathan Syncfusion Team December 19, 2016 11:51 AM UTC

Hi Michael, 
 
We regret for the inconvenience. 
 
According to our sample we have render the textarea in the second column. So, we used index as 1 in columns API and in colgroup.  
 
Code example:  
 

 $('.text').resizable({  
            resize: function (e) {  
                var grid = $("#FlatGrid").ejGrid("instance");  
                var colgroup = grid.element.find("colgroup");  
                var width = parseInt(this.style.width) - grid.model.columns[1].width;  
                for (var i = 0 ; i < colgroup.length ; i++) {                    
                    $($(colgroup[i]).children()[1]).css("width", width); 
                }  
            }  
        });  

 
According to your sample you have render the textarea in 20th column. So, we have to use index as 20 in columns API and in colgroup.  
 
To identify the index of an particular column, use the below code example. In resize event we can get the textarea element  and find the index of an textarea using jQuery index method.  
 
Find the code example:  


 $('.text').resizable({ 
            resize: function (e) { 
                var grid = $("#FlatGrid").ejGrid("instance"); 
                var colgroup = grid.element.find("colgroup"); 
                var index = $(this.parentElement).index(); 
                var width = parseInt(this.style.width) - grid.model.columns[index].width; 
                for (var i = 0 ; i < colgroup.length ; i++) { 
                    $($(colgroup[i]).children()[index]).css("width", width); 
                } 
            } 
        }); 
 
 
Regards, 
Prasanna Kumar N.S.V 


ML Michael Lambert December 19, 2016 07:13 PM UTC

Hi Prasann,
Closer, but still have some weird things happening.  What I really want to accomplish is a cell that behaves the same way a test cell in a Excel spreadsheet behaves when sizing.
Here are the issues I'm have with this example:
When I first go into edit mode every thing looks ok:


But as soon as I begin to drag the column (Notes) collapses to 0 width, but you can still seethe Textbox underlying column next to it:


As I widen the column by dragging the handle the Note column reappears, though the textbox doesn't fill the entire available space (height & width) of the resized column and if you notice the resized handle jumps to the column to the right (though I still resizes the Notes columns properly):


Finally when I adjust the width smaller than the original textbox I get this.  The textbox overlaps the column to the right and the resized handle is still in in the column to the right.  Though using the handle still resizes the proper column (Notes)

 
Again all I trying to do is replicate the sizing function of a spreadsheet cell, so if there is a better way to achieve this, please let me know!

Thanks


PK Prasanna Kumar Viswanathan Syncfusion Team December 20, 2016 12:16 PM UTC

Hi Michael, 

In our grid we do not have in-built support to resize the height and width of an input element. So, we have provided workaround using resize event for the text area and modify the text area width. Due to more complexities, further workaround solution is not feasible and we have considered this as a feature request list and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.  
 

Regards, 
Prasanna Kumar N.S.V 


Loader.
Live Chat Icon For mobile
Up arrow icon