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

Create Custom Number Editor Using NumericTextBox

Environment

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

Description

How to create a Grid with a custom number editor by using the NumericTextBox.

Solution

  1. Create an editor template within the following directory - "~\Views\Shared\EditorTemplates\"
  2. Pass the newly created view name to the following column configuration :
columns.Bound(p => p.Freight).EditorTemplateName("CustomNumericTextBox");

Example

@(Html.Kendo().Grid<GridColumnEditorTemplateKB.Models.OrderViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.OrderID).Filterable(false);
        columns.Bound(p => p.Freight).Format("{0:p5}").EditorTemplateName("CustomNumericTextBox");
    })
    .Editable(s=>s.Mode(GridEditMode.InCell))
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(10)
        .Model(m=>m.Id(s=>s.OrderID))
        .Read(read => read.Action("Orders_Read", "Grid"))
    )
)
@model double?

@(Html.Kendo().NumericTextBoxFor(m => m)
      .Value(Model)
      .Decimals(7)
      .Format("{0:p5}")
)

See Also

In this article