1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. Multiline Edit textbox in Grid

Multiline Edit textbox in Grid

Hi,

I would like to add a multiline textbox in my grid, how can I to do it?

Thanks,

6 Replies 1 reply marked as answer
RS Rajapandiyan Settu Syncfusion Team August 31, 2020 05:07 AM UTC

Hi Daniel, 

Greetings from Syncfusion support. 

We have analyzed your query. By using the CellEdit template feature, you can render Multiline-TextBox edit control in the Grid column. 

Refer to the below documentation and code example for more information. 

 
 
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col => 
{ 
    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).ValidationRules(new { required = "true"}).Add(); 
    col.Field("ShipAddress").HeaderText("Ship Address"). Edit(new { create = "create", read = "read", destroy = "destroy", write = "write" }).Width("150").Add(); 
 
}).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 
 
<script> 
    var elem; 
    var tObj; 
    function create(args) { 
        elem = document.createElement('input'); 
        return elem; 
    } 
    function write(args) { 
// create a multiline textbox control 
        tObj = new ej.inputs.TextBox({ 
            placeholder: 'Enter your address', 
            multiline : true, // enable multiline feature support 
            value: args.rowData[args.column.field]   // bind the column value to the textbox 
        }); 
        tObj.appendTo(elem); 
    } 
 
    function destroy() { 
        tObj.destroy(); 
    } 
    function read(args) { 
// return the textbox value to the grid 
        return tObj.value; 
    } 
</script> 


Please get back to us if you need further assistance. 

Regards, 
Rajapandiyan S

DA Dawo February 10, 2021 04:29 AM UTC

Hi Team,

I am trying to use the same functionality but when I try to edit the value in the grid and save, the value is null in the controller.

col.Field("Description").HeaderText("Commodity").Width("300").Edit(new { create = "createMemo", read = "readMemo", destroy = "destroyMemo", write = "writeMemo" }).Add();

   var elemMultiLine;
        var tMultiLineObj;
        function createMemo(args) {
            elemMultiLine = document.createElement('input');
            return elemMultiLine;
        }

        function writeMemo(args) {
            // create a multiline textbox control
            tMultiLineObj = new ej.inputs.TextBox({
                placeholder: 'Description',
                multiline: true, // enable multiline feature support
                value: args.rowData[args.column.field]// bind the column value to the textbox
            });
            tMultiLineObj.appendTo(elemMultiLine);
        }

        function destroyMemo() {
            tMultiLineObj.destroy();
        }
        function readMemo(args) {
            // return the textbox value to the grid
            return tMultiLineObj.value;
        }

Thanks,

RS Rajapandiyan Settu Syncfusion Team February 11, 2021 06:23 AM UTC

Hi Dawo, 
 
Thanks for contacting Syncfusion support. 
 
We are tried to reproduce the reported problem, but it was unsuccessful at our end. The multiline textbox value is properly saved in the Grid. Refer to the below screenshot and sample for more information. 
 
Screenshot #1: Returned value from the cellEdit template  
 
 
Screenshot #2: Send the edited value to the controller 
   
 
Screenshot #3: Receive the edited value at controller (Use CRUDModel class to deserialize the value) 
 
 
 
 
Still, if you face the issue, please share the below details to validate further with this. 
 
  1. Share the full Grid code & Controller side code you have used?
  2. Which type of data-binding you have used? Share the Adaptor details.
  3. Share the screenshot of Network Tab details while saving the record.
  4. Share the script version of Syncfusion packages.
  5. If possible, share the simple issue reproducible sample.
 
Regards, 
Rajapandiyan S 


DA Dawo February 12, 2021 01:26 AM UTC

Hi Rajapandiya,


1. Grid code



I attached cshtml file.

Thanks,



Attachment: index_2be35dee.zip

RS Rajapandiyan Settu Syncfusion Team February 18, 2021 01:06 PM UTC

Hi Dawo, 

We greatly appreciated your patience.  

We can reproduce the reported behavior at our end and we have confirmed this is an issue from our side and logged a bug for the same as “provide support to add mappinguid to the input element in multiline textbox”. At Syncfusion, we are committed to fixing all validated defects (subject to technical feasibility and Product Development Life Cycle ) and will include the defect fix in our upcoming patch release which will be rolled out on Feb 24th, 2021. 

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.  


You can resolve this by using following code example in the created event of multiline textbox. 



[index.cshtml] 

@Html.EJS().Grid("Grid").DataSource(dataManager => { dataManager.Url("/Home/UrlDatasource").InsertUrl("/Home/Insert").UpdateUrl("/Home/Update").RemoveUrl("/Home/Remove").Adaptor("UrlAdaptor"); }).Columns(col => 
{ 
    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).ValidationRules(new { required = "true"}).Add(); 
    col.Field("ShipAddress").HeaderText("Ship Address").Edit(new { create = "createMemo", read = "readMemo", destroy = "destroyMemo", write = "writeMemo" }).Width("150").Add(); 
 
}).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 
 
<script> 
    var elemMultiLine; 
    var tMultiLineObj; 
    function createMemo(args) { 
        elemMultiLine = document.createElement('input'); 
        return elemMultiLine; 
    } 
 
    function writeMemo(args) { 
    var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 
    // get the column index 
    var index = grid.getColumnIndexByField(args.column.field); 
    console.log(index); 
        // create a multiline textbox control 
        tMultiLineObj = new ej.inputs.TextBox({ 
            placeholder: 'Description', 
            multiline: true, // enable multiline feature support 
            value: args.rowData[args.column.field],// bind the column value to the textbox 
            created: function () { 
                this.element.setAttribute("e-mappinguid", "grid-column" + index); 
            } 
        }); 
        tMultiLineObj.appendTo(elemMultiLine); 
    } 
 
    function destroyMemo() { 
        tMultiLineObj.destroy(); 
    } 
    function readMemo(args) { 
        // return the textbox value to the grid 
        return tMultiLineObj.value; 
    } 
</script> 


Please get back to us if you need further assistance with this. 

Regards, 
Rajapandiyan S 


JM Jeyanth Muthu Pratheeban Sankara Subramanian Syncfusion Team April 5, 2021 05:52 AM UTC

Hi All,

 
We are glad to announce that our Essential Studio 2021 Volume 1 release v19.1.0.54  is rolled out and is available for download under the following link. The reported requirement “Provide support to add mappinguid to the input element in multiline textbox” has been included in this release. Therefore, we suggest you to upgrade the Syncfusion packages to the latest to resolve the issue. 


 
We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 


 
Regards,  
Jeyanth. 


Marked as answer
Loader.
Up arrow icon