Problems editing numeric values in the grid in UI for ASP.NET MVC

This is a migrated thread and some comments may be shown as answers.

Problems editing numeric values in the grid

15 Answers 255 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Ilkka asked on 28 Nov 2012, 03:09 PM

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; }

}

15 Answers, 1 is accepted

answered on 30 Nov 2012, 03:36 PM

Hello,

Straight to your questions:

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");

            }

        }

    }

}
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

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 20 Aug 2019, 10:09 AM

kendo-grid-incorrect-value-de-culture.zip

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

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.

answered on 11 Dec 2019, 09:36 AM

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

answered on 12 Dec 2019, 02:35 PM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.

answered on 16 Dec 2019, 12:05 PM

Hi Tsvetomir,

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

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.

answered on 18 Dec 2019, 09:54 AM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.

answered on 19 Dec 2019, 02:23 PM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.