Creating Custom Number Editor Using NumericTextBox
Environment
| Product | Grid for Progress® Telerik® UI for UI for ASP.NET Core |
Description
How can I create a Grid with a custom number editor by using the Telerik UI for ASP.NET Core NumericTextBox?
Solution
Create an editor template within the
~\Views\Shared\EditorTemplates\directory.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}")
)