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

Textarea in dialog editor form

Hello.
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.

3 Replies

VA Venkatesh Ayothi Raman Syncfusion Team 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, 
 
[Grid]   
<ejs-grid id="Grid"  dataSource="ViewBag.dataSource" allowPaging="true" > 
      <e-grid-pagesettings pageCount="5"></e-grid-pagesettings> 
            <e-grid-columns> 
. .   . 
                <e-grid-column field="ShipCountry"  headerText="Ship Country"  edit="@( new { create = "create", write = "write", read = "read", destroy = "destroy" })"></e-grid-column> 
 
            </e-grid-columns> 
      </ejs-grid> 
 
[template code] 
<script> 
    function create() { 
        elem = document.createElement('input'); // create a input element 
        return elem; 
   } 
 
    function destroy(args){ 
        autocomp.destroy(); 
    } 
 
    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 
        autocomp.appendTo(elem); 
    } 
 
 
</script> 
 
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. 
 
Regards,
Venkatesh Ayothiraman. 



TO Toni 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:
<div>
<textarea/>
<span/>
<label/>
</div>
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.

Regards



MS Madhu Sudhanan P Syncfusion Team 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. 

Regards, 
Madhu Sudhanan P 


Loader.
Live Chat Icon For mobile
Up arrow icon