How to add in KendoUI MVC Grid a thousand comma se

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

Answer 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.

Answer 2

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.