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

Showing Character Count within an Input Field When Editing Grid Row

Environment

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

Description

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

Solution

  • Set a handler for the Edit event.

     .Events(ev=>ev.Edit("onEdit"))
    
  • 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.

    @(Html.Kendo().Grid<CharacterCounter.Models.OrderViewModel>()
                .Name("grid")
                .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());
                })
                .Pageable()
                .Sortable()
                .Editable(e=>e.Mode(GridEditMode.InLine))
                .Scrollable()
                .Filterable()
                .Events(ev=>ev.Edit("onEdit"))
                .HtmlAttributes(new { style = "height:550px;" })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(20)
                    .Model(s=>s.Id(c=>c.OrderID))
                    .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
                    spanEl.style.color = 'red'; // add some styling
                    cell.appendChild(spanEl) //append the new element
                })
            }
        }
    

More ASP.NET MVC Grid Resources

See Also

In this article