Kendo NumericTextBox Percent Sign

Question

I am Trying to add the percent sign to the grid. I have found some posts which using this workaround. But this does not work.

"# \%" --> causes a javascript error

@(Html.Kendo().NumericTextBoxFor(m => m)
    .HtmlAttributes(new { style = "width:100%" })
    .Format("\\# \\%")
)

regards

Answer 1

I have found the solution in the telerik forum (http://www.telerik.com/forums/how-to-show-a-percentage-dollar-symbol)

 columns.Bound(e => e.ContractPercent).ClientTemplate("\\#=kendo.format(\"{0:p}\", ContractPercent / 100)\\#").EditorTemplateName("NumberPercent");

regards

Answer 2

Format for percentage is p. See documentation in here : http://docs.telerik.com/kendo-ui/getting-started/framework/globalization/numberformatting.

So you should use:

@(Html.Kendo().NumericTextBoxFor(m => m)
    .HtmlAttributes(new { style = "width:100%" })
    .Format("p")
)

Standard numeric formats:

• n for number

  kendo.culture("en-US"); kendo.toString(1234.567, "n"); //1,234.57 kendo.toString(10.12, "n5"); //10.12000 kendo.toString(10.12, "n0"); //10 kendo.culture("de-DE"); kendo.toString(1234.567, "n3"); //1.234,567

• c for currency

  kendo.culture("en-US"); kendo.toString(1234.567, "c"); //$1,234.57 kendo.culture("en-US"); kendo.toString(1234.567, "c0"); //$1,235 kendo.culture("de-DE"); kendo.toString(1234.567, "c3"); //1.234,567 €

• p for percentage (number is multiplied by 100)

  kendo.culture("en-US"); kendo.toString(0.222, "p"); //22.20 % kendo.culture("en-US"); kendo.toString(0.222, "p0"); //22 % kendo.culture("de-DE"); kendo.toString(0.22, "p3"); //22.000 %

• e for exponential

  kendo.toString(0.122, "e"); //1.22e-1 kendo.toString(0.122, "e4"); //1.2200e-1

Answer 3

For grid you can use this:

columns.Bound(e => e.Percent).ClientTemplate("#=Percent# %")