So I've made a hundred Kendo Grids with MVC so far and I have zero success with globalization and validation. To give a little bit more details: If we look at the demo presented here https://demos.telerik.com/aspnet-core/grid/globalization and the "Unit Price" column. You can clearly enter only numerics with only 1 delimiter depending on the culture. If you try to enter any non-numerical letter, it doesn't let you. Neither does it let you insert more than 1 delimiter (",,,,,,") or the wrong delimiter. So there's some kind of "on the fly validation" going on.
My grids don't have this. For example I have decimal columns and I can enter all letters, even non-numerics. I can type "03,,.awd923..." in a decimal column within the grid. What I have tho is culture. I think the culture I have set up works properly because when I check the kendo.cultures within JS console I can see all the info of the current culture (check image in attachments for more info).
Here's an example of one of my grids:
@(Html.Kendo().Grid<PromoComboItemGridModel>() .Name("ItemGrid") .AutoBind(false) .Pageable(pager => pager.Refresh(false)) .Filterable(filterable => filterable.Enabled(true)) .Sortable(sortable => sortable.Enabled(true)) .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple)) .AllowCopy(true) .Scrollable(a => a.Height("auto")) .Resizable(resize => resize.Columns(true)) .Navigatable() .NoRecords(t.GetString("No records in table")) .Mobile(MobileMode.Auto) .Editable(editable => editable.Mode(GridEditMode.InCell).Enabled(true).DisplayDeleteConfirmation(false)) .Events(events => events.Edit("onEdit")) .ToolBar(toolbar => { toolbar.Template(@<text><span id="addItem" onclick="addItem('ItemGrid')"style='float:left' class='btn btn-xs btn-default'> <span class='k-icon k-add'></span>@t.GetString("Add new item") </span></text>); } ) .Columns(columns => { columns.Bound(p => p.No); columns.ForeignKey(p => p.Type, (System.Collections.IEnumerable)ViewData["FItemTypeEnum"], "IDForSysClient", "Name").EditorTemplateName("FItemTypeEnumDropDown"); columns.Bound(c => c.Val).Visible(false); columns.Bound(c => c.MaterialString).Title(t.GetString("Value")).Width(200); columns.Bound(c => c.Quantity); columns.ForeignKey(p => p.RewardType, (System.Collections.IEnumerable)ViewData["GPriceTypeEnum"], "IDForSysClient", "Name").EditorTemplateName("GPriceTypeEnumDropDown"); columns.Bound(c => c.RewardVal); columns.Command(commands => { commands.Destroy().Text(t.GetString("Delete")).HtmlAttributes(new { @class = "btn btn-xs btn-danger" }); }).Title(t.GetString("Commands")).Width(110); }) .DataSource(dataSource => dataSource.Ajax() .ServerOperation(false) .Batch(false) .PageSize(3) .Model(model => { model.Id(gridMainAlias => gridMainAlias.No); model.Field(gridMainAlias => gridMainAlias.No).Editable(false); model.Field(gridMainAlias => gridMainAlias.Type); model.Field(gridMainAlias => gridMainAlias.Val); }) .Events(events => { events.Change("ItemGridChange"); }) ))6 Answers, 1 is accepted
Hi Denis,
Based on the provided information, I believe that the editor that is rendered is not a Kendo UI NumericTextBox widget. Regardless of the culture that is set, the numeric would not allow for entering characters. In order to render the numeric editor, you would have to name the cshtml file as "Int32" or "Decimal", respectively the int and decimal types.
Can you ensure that the editor is actually a Kendo UI NumericTextBox? This is due to the fact that the ASP.NET MVC framework renders the default one.
Looking forward to your reply.
Kind regards,
Tsvetomir
Progress Telerik
Rank 1
I'm not entirely sure which editor are you refering to. If we look at the "Quantity" column in the above grid. That's a decimal property. From my understanding, what you're saying is, is that I should change
columns.Bound(c => c.Quantity);
to something like
columns.Bound(c => c.Quantity).EditorTemplateName("NumericTextBoxTemplate");
Is this correct? Because if I look the "UnitPrice" column provided in documentation provided by you here https://demos.telerik.com/aspnet-core/grid/globalization there is no extra editor templates defined for that specific column. Yet it magically still works.
Hi Denis,
That is exactly the editor that I refer to. In the context of the demo example, it works because a view has been added to the ~Views/Shared/EditorTemplate folder. Its name is Decimal. And because of the naming, the Kendo UI Grid automatically picks this editor for all of the columns which are bound to a decimal data type.
Let me know in case a sample is needed to demonstrate how this works out.
Best regards,
Tsvetomir
Progress Telerik
Rank 1
Rank 1
To expand on this, my Decimal.cshtml Editor template looks like this currently
@using System.Diagnostics@using System.Globalization@using Kendo.Mvc.UI@model decimal?@(Html.Kendo().NumericTextBoxFor(m=>m) .Format("n") .Value(@Model))
How do you differentiate between decimal? and decimal templates? What about EditorTemplates for other types such as "long"?
Hi Denis,
The editor templates are used only when the cshtml files are set. And they are rendered only when the grid is in edit mode.
As per the editor templates for other data types, you would have to set the name of the templates to be the data type's corresponding non-sugar syntax name. In other words, for int, you would set "Int32" and for long, you would set "Int64".
I hope you find this informative.
Kind regards,
Tsvetomir
Progress Telerik