How to add in KendoUI MVC Grid a thousand comma separator

Question

I want to display 1000 like 1,000 in Grid (Must have commas). Initial data type is string. I need thousand comma separator.

I have the same questions as in How to change display format of long variable?. But my data type is string.

In this topic they did not have clear answer for KendoUI MVC Grid for thousand comma separator.

I have KendoUI Grid

@(Html.Kendo().Grid((IEnumerable<MyApp.Models.MyModel>)ViewBag.QualReq)
    .Name("MyGrid")
    .Columns(columns =>
        { 
        columns.Bound(p => p.Actual); 
        })
    .DataSource(d => d
        .Ajax()
    )
)

Model

public class MyModel
{ 
    public virtual string Actual { get; set; } 
}

Controller

    [OutputCache(Duration = 60)]
    public ActionResult MyActionMethod(int RankId = 0)
    { 
        . . .                  
        ViewBag.QualReq = qualificationRequirements.Where(x => x.RankID == RankId).ToList();
        . . .

I have not found any information for MVC Grid in Number Formatting topic. http://docs.telerik.com/kendo-ui/framework/globalization/numberformatting

Scott Dorman · Answer 1 · 2016-03-14T20:37:32.047

1

The number formatting document you link to is showing how you would do this in JavaScript. Part of the problem you're running in to is that you are using a string property to store numeric data. You need to change your Actual property to be an int (or some other numeric type) instead of a string and then add a DisplayFormat attribute [DisplayFormat(DataFormatString = "{0:N2}")].

The thing to keep in mind though, is that without setting the culture, it's going to use whatever the thread's current culture is (presumably en-US since you want to use a comma as the separator) to determine what the separator character should be. If you need it to be something different (for a different culture), you're going to need to set the culture explicitly.

edited Mar 14 '16 at 20:37

answered Mar 14 '16 at 18:16

Scott Dorman

42,236
12
79
110

[DisplayFormat(DataFormatString = "{0:N2}")] public virtual string Actual { get; set; } is not working for me – фымышонок Mar 14 '16 at 18:44
I updated my answer. The problem is that your `Actual` property is a string, so the formatting is, effectively, ignored. If the value is meant to be numeric, you should use one of the numeric data types to store it. – Scott Dorman Mar 14 '16 at 20:38
It was the question: How to format 1000 like 1,000 if data type is a string? – фымышонок Mar 14 '16 at 20:48
You really can't without first somehow changing the data type to be numeric. Why does the data type need to be a string? – Scott Dorman Mar 14 '16 at 20:59
The data has values like words, for example "active" and numbers. – фымышонок Mar 14 '16 at 21:00
In that case, you're going to need to create your own custom attribute. – Scott Dorman Mar 14 '16 at 21:26

score 1 · Answer 2 · answered May 05 '16 at 15:12

You can do this on the grid itself with ClientTemplate.

@(Html.Kendo().Grid((IEnumerable<MyApp.Models.MyModel>)ViewBag.QualReq)
    .Name("MyGrid")
    .Columns(columns =>
        { 
            columns.Bound(p => p.Actual).ClientTemplate("#= kendo.format('{0:N0}', parseInt(Actual)) #"); 
        })
    .DataSource(d => d
        .Ajax()
    )
)

If this field sometimes contains non-numeric data, you may want to include some logic to account for those cases.

score 0 · Answer 3 · answered Feb 08 '21 at 14:17

0

set .Format("{0:n0}") in Columns Kendo Grid

.Columns(columns =>
{
    columns.Bound(c => c.Price).Format("{0:n0}"); 
})

answered Feb 08 '21 at 14:17

Iman Roosta

2,228
12
13

How to add in KendoUI MVC Grid a thousand comma separator

3 Answers3

Linked