New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Show Characters Count within an Input Field When Editing Grid Row


Product Grid for Progress® Telerik® UI for ASP.NET MVC


How to show the characters count when editing a field in a row in the Grid?


  • Set a handler for the Edit event.
  • Select the input fields, all of which are actual text boxes within the Grid.

  • Add event listener for the Change event.

  • Get the count of the characters.

  • Append a new element right after the input field.

            .Columns(columns =>
                columns.Bound(p => p.OrderID).Filterable(false);
                columns.Bound(p => p.Freight);
                columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
                columns.Bound(p => p.ShipName);
                columns.Bound(p => p.ShipCity);
                columns.Command(cmd => cmd.Edit());
            .HtmlAttributes(new { style = "height:550px;" })
            .DataSource(dataSource => dataSource
                .Read(read => read.Action("Orders_Read", "Grid"))
                .Update(u=>u.Action("Orders_Read", "Grid"))
   function onEdit(e) {
        var inputFields = $('#grid .k-grid-content tbody .k-input[data-role="textbox"]')
        if (inputFields) {
            inputFields.on('change', function (e) {
                var charactersCount = e.currentTarget.value.length // characters count
                var cell = e.currentTarget.parentNode.parentNode; // parentElement to attach the new one
                var spanEl = document.createElement('span') // new element
                spanEl.textContent = `${charactersCount}/250`; // set its text
       = 'red'; // add some styling
                cell.appendChild(spanEl) //append the new element
In this article