New to Telerik UI for ASP.NET CoreStart a free 30-day trial

Showing Character Count within an Input Field When Editing Grid Row

Environment

ProductProgress® Telerik® UI for ASP.NET Core Grid

Description

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

Solution

  • Set a handler for the Edit event.

    Razor
     .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.

    Index.cshtml
    @(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"))
                )
            )

More ASP.NET Core Grid Resources

See Also