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

Showing Character Count within an Input Field When Editing Grid Row


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


How to show the characters count when editing a field in a row in the Grid for ASP.NET MVC?


  • 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

More ASP.NET MVC Grid Resources

See Also

In this article