How to use textarea in grid edit form?

1 min read

This explains about using TextArea element in grid edit form

Solution

Using editTemplate property of Grid column, we can use textarea in inline editing of grid. The editTemplate property is used to render any controls in edit form by which we can enable multiline input for the particular column.

In editTemplate create event, we can create the textarea element for the particular column.

The following code example explains how to use textarea in inline editing of grid

 
JS
 
$(function () {
        $("#Grid").ejGrid({
            // the datasource "window.gridData" is referred from jsondata.min.js
            dataSource: window.gridData,
            allowPaging: true,
            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, },
            toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },
            columns: [
                    { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, validationRules: { required: true, number: true }, width: 90 },
                    {
                        field: "CustomerID", headerText: 'Customer ID',
                        editTemplate: {
                            create: function () {
                                return "<textarea style='resize:none; width:100%'>{{:CustomerID}}</textarea>";
                            },
                            read: function (args) {
                                return args.val();
                            },
                        }, width: 170
                    },
                    { field: "EmployeeID", headerText: 'Employee ID', width: 150 },
                    { field: "Freight", headerText: 'Freight', textAlign: ej.TextAlign.Right, editParams: { decimalPlaces: 2 }, width: 80, format: "{0:C}" },
                    { field: "ShipName", headerText: 'Ship Name', width: 150 },
            ]
        });
    });

 
MVC
 
@(Html.EJ().Grid<SampleDemo.Order>("Grid")
        .Datasource((IEnumerable<object>)ViewBag.datasource)
        .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })
        .ToolbarSettings(toolbar =>
        {
            toolbar.ShowToolbar().ToolbarItems(items =>
            {
                items.AddTool(ToolBarItems.Add);
                items.AddTool(ToolBarItems.Edit);
                items.AddTool(ToolBarItems.Delete);
                items.AddTool(ToolBarItems.Update);
                items.AddTool(ToolBarItems.Cancel);
            });
        })
        .AllowPaging()
        .Columns(col =>
        {
            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(90).ValidationRules(v => v.AddRule("required", true).AddRule("number", true)).Add();
            col.Field("CustomerID").HeaderText("Customer ID").EditTemplate(a => { a.Create("create").Read("read").Write("write"); }).TextAlign(TextAlign.Right).Width(170).Add();
            col.Field("EmployeeID").HeaderText("Employee ID").Width(150).Add();
                 col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(80).Format("{0:C}").NumericEditOptions(new EditorProperties() { DecimalPlaces = 2 }).Add();
            col.Field("ShipName").HeaderText("ShipName").Width(150).Add();
                    })
)
    
<script type="text/javascript">
    function create() {
        return "<textarea style='resize:none; width:100%'>{{:CustomerID}}</textarea>"
    }
 
    function read(args) {
        return args.val();
    }
</script>

 
ASP.NET
 
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
       <div>
        <ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" >
            <Columns>
                <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Right" Width="90">
                    <ValidationRule>
                        <ej:KeyValue Key="required" Value="true" />
                        <ej:KeyValue Key="number" Value="true" />
                    </ValidationRule>
                </ej:Column>
                <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="170">
                    <EditTemplate Create="create" Read="read" Write="write" />
                </ej:Column>
                <ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right"  Width="150" />
                <ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="80" Format="{0:C}">
                    <NumericEditOptions DecimalPlaces="2"></NumericEditOptions>
                </ej:Column>
                <ej:Column Field="ShipName" HeaderText="ShipName" Width="150" />
            </Columns>
            <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings>
            <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>
        </ej:Grid>
    </div>
<script type="text/javascript">
    function create() {
        return "<textarea style='resize:none; width:100%'>{{:CustomerID}}</textarea>"
    }
 
    function read(args) {
        return args.val();
    }
 
</script>
</asp:Content>

Result:

Did you find this information helpful?

Yes

Comments

How to use textarea in grid edit form?

Access denied