Showing Character Count within an Input Field When Editing Grid Row

Environment

Product

Progress® 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.

   .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 Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core Grid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Grid for ASP.NET Core
• Server-Side API Reference of the Grid for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base