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.
Unfortunately, activation email could not send to your email. Please try again.

Multiline Edit textbox in Grid.

Thread ID:

Created:

Updated:

Platform:

Replies:

127459 Nov 16,2016 02:48 PM Dec 20,2016 07:16 AM ASP.NET MVC 11
loading
Tags: Grid
Michael Lambert
Asked On November 16, 2016 02:48 PM

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

Prasanna Kumar Viswanathan [Syncfusion]
Replied On November 17, 2016 07:49 AM

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 
 


Michael Lambert
Replied On November 17, 2016 12:38 PM

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,




Farveen Sulthana Thameeztheen Basha [Syncfusion]
Replied On November 18, 2016 12:07 PM

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 


Michael Lambert
Replied On December 14, 2016 04:54 PM

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

Prasanna Kumar Viswanathan [Syncfusion]
Replied On December 15, 2016 08:31 AM

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 
 


Michael Lambert
Replied On December 15, 2016 03:07 PM

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



Prasanna Kumar Viswanathan [Syncfusion]
Replied On December 16, 2016 03:14 AM

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 


Michael Lambert
Replied On December 16, 2016 01:52 PM

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??

Prasanna Kumar Viswanathan [Syncfusion]
Replied On December 19, 2016 06:51 AM

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 


Michael Lambert
Replied On December 19, 2016 02:13 PM

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


Prasanna Kumar Viswanathan [Syncfusion]
Replied On December 20, 2016 07:16 AM

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;