Show Characters Count within an Input Field When Editing Grid Row
Environment
Product | Grid for Progress® Telerik® UI for ASP.NET MVC |
Description
How to show the characters count when editing a field in a row in the Grid?
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
})
}
}