Limit the number of Characters entered for a field in a Grid.

[Danyelle]

In my gird I have a note field. How would I limit the number of characters the user can enter when add/editing the field?

 @Html.EJS().Grid("ContainerGrid").DataSource(DataManager => { DataManager.Json(@Model.ContainerTransactions.ToArray()).InsertUrl(@Url.Action("AddContainerTransaction", "Containers")).UpdateUrl(@Url.Action("UpdateContainerTransaction", "Containers")).RemoveUrl(@Url.Action("DeleteContainerTransaction", "Containers")).Adaptor("RemoteSaveAdaptor"); }).AllowFiltering(true).ToolbarClick("toolbarClick").Load("onLoad").EnableAdaptiveUI(false).RowRenderingMode(Syncfusion.EJ2.Grids.RowRenderingDirection.Horizontal).Width("auto").Columns(col =>

                                 {

                                     col.Field("TransactionNo").Visible(false).Add();

                                     col.Field("InventoryID").HeaderText("Item").IsPrimaryKey(true).Width("60").Visible(false).EditType("dropdownedit").Edit(new { create = "create", read = "read", destroy = "destroy", write = "write" }).ValidationRules(new { required = true }).Add();

                                     ...

                                     col.Field("Notes").HeaderText("Notes").Width("150").Add();

                                 }).ActionBegin("actionBegin").ActionComplete("actionComplete").

[Ajith Govarthan]

Hi Danyelle, 

Thanks for contacting Syncfusion support. 

Query: Limit the number of Characters entered for a field in a Grid. 

 

Based on your query you want to limit the number of characters entered in the input field element. So, we have shared the code example in that we have set the maxLength attribute for the CustomerID column to limit the number of characters entered in the CustomerID column. Please refer the below code example, for your reference. 

Code Example: 

Index.cshtml 

<div class="control-section"> 

    @Html.EJS().Grid("DefaultPaging").ActionComplete("actionComplete").DataSource(dataManager => 

{ 

    dataManager.Json(ViewBag.datasource).InsertUrl("/Home/Insert").RemoveUrl("/Home/Delete").UpdateUrl("/Home/Update").Adaptor("RemoteSaveAdaptor"); 

 

}).Columns(col => 

{ 

 

    col.Field("OrderID").HeaderText("Order ID").Width("120").IsPrimaryKey(true).EditType("dropdownedit").Filter(new { type = "CheckBox" }).ValidationRules(new { required = true }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

    col.Field("CustomerID").HeaderText("Customer Name").ValidationRules(new { required = true }).Width("170").Add(); 

    col.Field("OrderDate").HeaderText("Order Date").Width("130").EditType("datepickeredit").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

    col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

    col.Field("ShipCountry").EditType("dropdownedit").HeaderText("Ship Country").Width("150").Add(); 

 

}).Height("400").AllowPaging().Toolbar(new List<string> 

        () { "Add", "Edit", "Delete", "Update", "Cancel" }).AllowFiltering().FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu)).EditSettings(edit => { edit.AllowEditing(true).AllowAdding(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); ; }).Render() 

</div> 

<script> 

 

    function actionComplete(args) { 

 

   if (args.requestType === 'add' || args.requestType === 'beginEdit') { 

      var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 

      args.form 

        .querySelector('#' + grid.element.id + 'CustomerID').setAttribute('maxLength', 5);   // get the input field with grid id + and column field 

    }    } 

</script> 

 

Please get back to us if you need further assistance. 

Regards, 

Ajith G. 

[Danyelle]

When I try this I am getting an error in the javascript:

[Thiyagu Subramani]

Hi Danyelle, 

Thanks for your update. 

From your shared information we suspect that your reported problem may occurs while using edit form element in actionBegin event instead of actionComplete event. By default form element is not created in args.requestType as add and beginEdit in actionBegin. So we suggest you to use below code in actionComplete event. 

@Html.EJS().Grid("Grid").ActionComplete("ActionComplete").DataSource(dataManager => 

    { 

        dataManager.Json(ViewBag.dataSource).InsertUrl("/Home/Insert").RemoveUrl("/Home/Delete").UpdateUrl("/Home/Update").Adaptor("RemoteSaveAdaptor"); 

}).  .  .  .  .  .  .  .Render() 

</div> 

<script> 

    function ActionComplete(args) { 

        if (args.requestType === 'add' || args.requestType === 'beginEdit') { 

            args.form.querySelector('#' + this.element.id + 'CustomerID').setAttribute('maxLength', 5);   // get the input field with grid id + and column field 

        } 

    } 

</script> 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S 

[Danyelle]

Ok, this does work in that it prevents the user from typing more than the max length of characters however I would like an error message to show letting them know they have reached the max amount of characters allowed.

[Thiyagu Subramani]

Hi Danyelle, 

Thanks for your update. 

Based on your share information, we suspect that you want to display the error message while entering above the maximum character length. To achieve your requirement, we suggest you to provide validation rules to the required CustomerID column in actionComplete event. You can add the rules by the below way, please refer the below Code example for your reference, 

function actionComplete(args) { 

      if (args.requestType === 'beginEdit' || args.requestType === 'add') { 

        (args.form).ej2_instances[0].addRules("CustomerID", { required: true, minLength: [customFn, ‘Maximum 5 letters only allowed’] }); 

} 

} 

function customFn(args) { 

    return args['value'].length <= 5;  // you can customize you validation rules here 

  }; 

 

 

Note: Initially validation occurs after focus outing the required input element. 

Documentation : https://ej2.syncfusion.com/aspnetmvc/documentation/grid/edit/#custom-validation 

https://ej2.syncfusion.com/aspnetmvc/documentation/grid/edit/#column-validation 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S.