This is a migrated thread and some comments may be shown as answers.
Kendo Grid globalization and validation not working
6 Answers 22 Views
This is a migrated thread and some comments may be shown as answers.
DENIS
Top achievements
Rank 1
DENIS asked on 17 Oct 2019, 07:11 AM

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

Sort by
0
Tsvetomir
Telerik team
answered on 21 Oct 2019, 06:32 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
DENIS
Top achievements
Rank 1
answered on 21 Oct 2019, 07:07 AM

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.

0
Accepted
Tsvetomir
Telerik team
answered on 22 Oct 2019, 09:50 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
DENIS
Top achievements
Rank 1
answered on 22 Oct 2019, 11:18 AM
Huh yeah, this was it. This "Decimal.cshtml" EditorTemplate with a "NumericTextBox" in it was missing for the grid to work properly. Could you please add this to the documentation? This is an essential part of the grid for it to work like it's supposted to, otherwise the demo is simply not complete.
0
DENIS
Top achievements
Rank 1
answered on 22 Oct 2019, 11:31 AM

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"?

0
Tsvetomir
Telerik team
answered on 23 Oct 2019, 12:17 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
DENIS
Top achievements
Rank 1
Answers by
Tsvetomir
Telerik team
DENIS
Top achievements
Rank 1
Share this question
or