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
Editevent..Events(ev=>ev.Edit("onEdit")) Select the input fields, all of which are actual text boxes within the Grid.
Add event listener for the
Changeevent.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 }) } }