Problems editing numeric values in the grid

[Ilkka]

I have been trying out the Kendo UI MVC Grid and have now faced a problem I could use some help with while trying to implement the batch editing functionality: 

1. Data that is displayed in the grid has dots as decimal separators while the culture setting would use commas. Regardless of the culture setting, any model data that the grid passes to the update method is invalid because the decimal values are validated incorrectly.
2. For some reason, the grid doesn't allow me to edit numeric fields (nullable double) at all. Clicking the cell clears the field but doesn't show me a real editor or allow me to change the value.

Thank you.

View:

@(Html.Kendo().Grid<ExpakV2.Models.GridViewResult>()

    .Name("Grid")

    .Columns(columns =>

    {

        columns.Bound(p => p.ItemID).Width("10%").Title(i18n.s("itemCode"));

        columns.Bound(p => p.Code).Width("10%").Title(i18n.s("itemCode"));

        columns.Bound(p => p.Name).Width("25%").Title(i18n.s("itemName"));;

        columns.Bound(p => p.ItemGroup1).Width("10%").Title(i18n.s("itemGroup1"));

        columns.Bound(p => p.ItemGroup2).Width("10%").Title(i18n.s("itemGroup2"));

        columns.Bound(p => p.ItemGroup3).Width("15%").Title(i18n.s("itemGroup3"));

        columns.Bound(p => p.AbcClass).Width("5%").Title(i18n.s("abcClass"));

        columns.Bound(p => p.MinBalance).Width("5%").Title(i18n.s("minBalance")).Format("{0:0.####}");

        columns.Bound(p => p.MaxBalance).Width("5%").Title(i18n.s("maxBalance")).Format("{0:0.####}");

        columns.Bound(p => p.MinBalanceRate).Width("5%").Title(i18n.s("minBalanceRate")).Format("{0:0.####}");

        columns.Bound(p => p.MaxBalanceRate).Width("5%").Title(i18n.s("maxBalanceRate")).Format("{0:0.####}");

        columns.Bound(p => p.sum_of_quantities).Width("5%").Title(i18n.s("sum_of_quantities")).Format("{0:0.####}");

        columns.Bound(p => p.avg_of_quantities).Width("5%").Title(i18n.s("avg_of_quantities")).Format("{0:0.####}");

        columns.Bound(p => p.sum_of_value).Width("5%").Title(i18n.s("sum_of_value")).Format("{0:0.####}");

        columns.Bound(p => p.avg_of_value).Width("5%").Title(i18n.s("avg_of_value")).Format("{0:0.####}");

        columns.Bound(p => p.Unit).Width("5%").Title(i18n.s("itemUnit"));

        columns.Bound(p => p.AvgPrice).Width("5%").Title(i18n.s("avgPrice")).Format("{0:0.####}");

        columns.Bound(p => p.Location).Width("5%").Title(i18n.s("location"));

    })

    .Pageable()

    .Reorderable(conf => conf.Columns(true))

    .Scrollable()

    .Filterable()

    .Sortable()

    .Resizable(resize => resize.Columns(true))

    .DataSource(dataSource => dataSource

        .Ajax()

        .Read(read => read.Action("GetDataForKendoGrid", "Sale"))

        .Model(model => { model.Id(p => p.ID); })

        .Update("EditItemInKendoGrid", "Sale")

        .PageSize(100)

    )

    .ToolBar(toolbar => { toolbar.Save(); })

    .Editable(editable => editable.Mode(GridEditMode.InCell))

    )


Controller actions:

public ActionResult GetDataForKendoGrid([DataSourceRequest] DataSourceRequest request)

        {

            int page = request.Page;

            int pageSize = request.PageSize;

 

            Report report = userDb.Reports.Find((int)HttpContext.Session["ReportID"]);

            IQueryable<GridViewResult> tempdata = AdditionalDataProvider.GetGridViewItemDataSource(report);

            System.Collections.IEnumerable data = tempdata.OrderBy(t => t.ID).Skip((page-1)*pageSize).Take(pageSize).ToList();

 

            int total = tempdata.Count();

 

            var result = new DataSourceResult()

            {

                Data = data,

                Total = total

            };

 

            return Json(result);

        }

 

        [HttpPost, ValidateInput(false)]

        public ActionResult EditItemInKendoGrid([DataSourceRequest] DataSourceRequest request, GridViewResult editable)

        {

 

            if (ModelState.IsValid)

            {

                // update code, the state is always invalid

            }

            else

            {

                ViewData["EditError"] = "Invalid model state";

                 

            }

 

            return Json(ModelState.ToDataSourceResult());

        }

Model:

public class GridViewResult

    {

        public int ID { get; set; }

        public string ItemID { get; set; }

        public string Code { get; set; }

        public string Name { get; set; }

        public string Supplier { get; set; }

        public string AbcClass { get; set; }

 

        public double? MinBalance { get; set; }

        public double? MaxBalance { get; set; }

 

        public double? MinBalanceRate { get; set; }

        public double? MaxBalanceRate { get; set; }

 

        public string Unit { get; set; }

        public double? AvgPrice { get; set; }

 

        public int? Location { get; set; }

 

        public string ItemGroup1 { get; set; }

        public string ItemGroup2 { get; set; }

        public string ItemGroup3 { get; set; }

 

        public double? sum_of_quantities { get; set; }

        public double? avg_of_quantities { get; set; }

        public double? sum_of_value { get; set; }

        public double? avg_of_value { get; set; }

}

[Daniel]

Hello,

Straight to your questions:

1. In order to use a culture specific format, you should include the file for the corresponding culture and set it with the kendo.culture method like described in this documentation. To show the formatted number based on the culture in the Grid, you should set a standard numeric format to the column.
   The issue with the format of the numbers sent to the server is a known one and is logged in our system for further investigation. A workaround for now is to use the request Data function to convert the numbers based on the current culture e.g.
   

   .Update(update => update.Action("EditItemInKendoGrid", "Sale").Data("convertDecimals"))

   function convertDecimals(data) {
       for (var property in data) {
           var value = data[property];
           if (typeof value === "number") {
               // if the number is integer
               if (value % 1 == 0) {
                   data[property] = value.toString();
               }
               else {
                   data[property] = kendo.toString(value, "n");
               }
           }
       }
   }

2. I am not sure what is causing this problem. Do you have an editor template defined for numbers? If yes, could you share the code? If there is not, the problem could be cause by a JavaScript error. A sample project would help to determine what exactly goes wrong.

Regards,
Daniel
the Telerik team

[Ilkka]

Hello,

Thank you for your answers. The data function workaround for the decimals seems to work. The second problem was indeed caused by a missing editor template: the template was defined correctly but it wasn't used by the grid. Adding a [DataType("Number")] attribute to the model property solved the problem. The issue is now resolved.

Thank you.
- Ilkka

[Tomasz]

We had the same issue with formatting number for nl-BE.
For a now I used your workaround
When can we expect official bug fix ?

[Daniel]

Hello Tomasz,

At this point I cannot commit to an exact time frame. We will try to include a fix for this problem for the next official release.

Regards,
Daniel
the Telerik team

[Heiko]

Many years later and it seems that I stumble upon the same old problem. Has it been fixed?

What I have is an ASP.NET Core 2.2 project and a grid with one numeric column where I can enter values with 2 decimal places. The culture is "de-DE" and is set for the page and also explicitly for the numeric textbox. When I enter "0,40" (which is the german value for 0.4) it is sent to the server as "4.0". 

Yes, the workaround above is a valid one, but again: has this been fixed? If yes, what is the problem now?

Regards
Heiko

[Tsvetomir]

Hi Heiko,

The bug of interest has been already fixed and there should be a need for additional customization in order to have the same value on the server-side. Here is a short video demonstration for sending and parsing the values on the server-side:

https://screencast-o-matic.com/watch/cqjY6ntj2l

In case the issue is still present, is it possible for you to upgrade to the latest version of the suite and see if it gets resolved? As well as, it is mandatory for the correct parsing of the values to have matching cultures on the client-side and server-side. Can you ensure that those match?

I am attaching the sample project from the video above. Is it possible for you to modify it in order to replicate the faulty behavior and send it back to me?


Best regards,
Tsvetomir
Progress Telerik

[Andreas]

Hi Tsvetomir,

i have a similar problem and i found this forum post here.
I have a Kendo Grid like in your sample Project.
I checked the culture settings server-side and client-side - it is de-DE which is what i want. I have the same error described by Heiko:

Whenever i enter a value with ',' the value is not send correctly to the controller. Client-Side the value is still fine while saving but not server-side. I investigated your example which also works correctly on my side. There is one main difference in the datasource definition: In the given sample-project it is [.Ajax()] and in my project it is [.WebApi()] !

So i changed Ajax() -> .WebApi() in the sample-project and now it has the same behavior, the same error. The Value is wrong at server-side.

What is going wrong when using dataSource -> WebApi? I have no idea what to do, need help. Thank you in advance

 

[Tsvetomir]

Hi Andreas,

Thank you for taking the time to provide information on the scenario that you are facing. In general, the WebApi implementation was for the invariant culture. However, with the last Service Pack, an enhancement was introduced regarding the WebApi serialization. Can you ensure that the latest version of the suite - 2019.3.1023 is installed? More information could be found in the following GitHub issue:

https://github.com/telerik/kendo-ui-core/issues/5107

Also, it is worth mentioning that there is a workaround provided inside the issue above. 

 

Best regards,
Tsvetomir
Progress Telerik

[Andreas]

Hi Tsvetomir,

thank you for your assistance. I can confirm that i have the latest official release 2019.3.1023 installed. Behavior is still present. I also can confirm that the workaround works like a charm. Nevertheless it is kind of extra work on every grid and i i would like to avoid that. Are there any plans to build in an option for the webapi transport to include the fix? If no i would think about refactoring every grid to .ajax transport

Best regards

[Tsvetomir]

Hi Andreas,

The Kendo.Mvc.dll is responsible for the wrappers of the widgets and their options. However, the logic is executed in JavaScript. Can you ensure that the scripts and styles are updated in the project?

In case the issue persists, share a sample project in which the faulty behavior could be replicated. I will be happy to debug the case locally and get back to you with accurate suggestions.

 

Best regards,
Tsvetomir
Progress Telerik

[Andreas]

Hi Tsvetomir,

 

the App is in .net core 2.2 and the references in the project file are:

<PackageReference Include="KendoUIProfessional" Version="2019.3.1023" />
<PackageReference Include="Telerik.UI.for.AspNet.Core" Version="2019.3.1023" />

The javascript-files are:

kendo.all.min.js (2019.3.1023)
kendo.aspnetmvc.min.js (2019.3.1023)

That is all. 

Regarding a sample, just take the one you shared here 
https://www.telerik.com/forums/problems-editing-numeric-values-in-the-grid#9FAXFWdhOUaYHCVC78gMNw

I've updated the Referenz to Telerik.UI to the latest Version and changed the Datasource parameter from ajax to webapi.
After that the error/behavior is still present.

 

[Tsvetomir]

Hi Andreas,

Thank you for referencing the project in which the issue could be observed. Indeed, updating the references does not completely resolve the issue. This is due to the fact that when the data source is initialized, it sets the internal culture based on the options of the grid. In the provided project, the culture is not set. Can you try adding the following and let me know in case the issue persists:

.DataSource(dataSource => dataSource
	.WebApi()
	.PageSize(20)
        .Model(m=>m.Id(id=>id.OrderID))
        .Culture("de-DE")
	.Read(read => read.Action("Orders_Read", "Grid"))
	.Update(up => up.Action("Orders_Update", "Grid"))
)

Let me know in case the issue persists.

 

Best regards,
Tsvetomir
Progress Telerik

[Andreas]

Hi Tsvetomir,

setting the culture solves the issue.

So i have to set the culture whenever i use the ".WebApi()" dataSource setting? Because with .Ajax() i don't have to set the culture and i use different grid setups through the app. The culture in the app can be changed by the user and i would prever it being handled automatic by the controls.

Any plans on giving an option in the .WebApi setting where the culture behaves like in .Ajax() - or should i avoid using the WebApi() setting when cultures are kind of important?

Thank you for your assistance - best regards

[Tsvetomir]

Hi Andreas,

The WebApi functionality was implemented to explicitly set the culture via its options. Therefore, you would have to set it. This is due to the fact that the current culture of the page is not directly subtracted. If the current culture was applied, a breaking change would have been introduced - for the people who have configured their WebApi data sources to be working with en-US regardless of the current culture. And we strive to not introduce breaking changes with the new versions of the suite.

As an alternative, you could apply it in a similar way compared to the one that is shown in the GitHub issue in one of my previous responses.

 

Regards,
Tsvetomir
Progress Telerik

[Andreas]

Hi Tsvetomir,

i got the point with the design of the WebApi functionality and the reason you avoid breaking changes. Thanks for clarification i will use a solution similar to the one in the GitHub issue.

Regards,

Andreas