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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Textarea in dialog editor form

Thread ID:





140607 Oct 28,2018 09:48 PM UTC Oct 30,2018 04:22 AM UTC ASP.NET Core - EJ 2 3
Tags: DataGrid
Asked On October 28, 2018 09:48 PM UTC

I've configured a grid to be edited using the dialog window (no template) and I'd like one of the fields to be and textarea instead of a simple text box a I need to fill it with several lines text.
I've searched in all the documentation with no success. In other platforms I've found that the column has a EditTemplate property but bot for Core.
Thanks in advance.

Venkatesh Ayothi Raman [Syncfusion]
Replied On October 29, 2018 08:37 AM UTC

Hi Toni, 
Thanks for using Syncfusion products. 
We can enable the edit template feature using C# in tag helper definition. Pleaser refer to the following code example, 
<ejs-grid id="Grid"  dataSource="ViewBag.dataSource" allowPaging="true" > 
      <e-grid-pagesettings pageCount="5"></e-grid-pagesettings> 
. .   . 
                <e-grid-column field="ShipCountry"  headerText="Ship Country"  edit="@( new { create = "create", write = "write", read = "read", destroy = "destroy" })"></e-grid-column> 
[template code] 
    function create() { 
        elem = document.createElement('input'); // create a input element 
        return elem; 
    function destroy(args){ 
    function read(args) { 
        return autocomp.value; 
    function write(args) { 
        autocomp = new ej.dropdowns.AutoComplete({ 
            dataSource: @Html.Raw(Json.Encode(@ViewBag.data)),//assign a new DataSource 
            // map the appropriate columns to fields property 
            fields: { value: 'Country' }, 
            //enable the search operation for Dropdown 
            allowFiltering: true, 
            placeholder: "Select a Country", 
            value: args.rowData.Country 
        })//selected data 
Note: you can render the any customize control in the edit template feature 
Please let us know if you have any further assistance on this. 
Venkatesh Ayothiraman. 

Replied On October 30, 2018 01:05 AM UTC

Well... after a hard work I got the way.
I used the document.createElement method in the create function as you suggested. Of course, the autocomplete element was absolutely innecessary for me.
The problem was that I got and ugly textarea without any class nor the field label neither following the same structure that other elements in the dialog does:
I had to append the class and the css decorations in the write function but it only fixed (and not completely) the textarea element.
Finally, on the actionComplete event I had to append the full structure as shown above:
Create a div and move the textarea into it (make it parent):
            $('.e-rowcell > textarea').wrap('<div id="divGestio" class="e-float-input e-control-wrapper">');
Create the siblings:
            $('#divGestio').append('<span class="e-float-line"></span>');
            $('#divGestio').append('<label class="e-float-text e-label-top" id="label_GridBustiaGestio" for="GridBustiaGestio" style="margin-top:3px;">Gestió</label>');
Now, everything looks almost as I expected

Anyway, you should consider to make a textarea a EditType without having to write this workaround. A textarea is a very common field in many dialogs.


Madhu Sudhanan P [Syncfusion]
Replied On October 30, 2018 04:22 AM UTC

Hi Toni, 

We are glad that your requirement has been achieved. Also based on your suggestion, we will add documentation for using text area as column editor in grid and it will be refreshed in any of our upcoming releases. 

Madhu Sudhanan P 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon