1

Trying to add a % sign to a number in a Kendo NumericTextBox. They suggest escaping the % sign as such:

$("#numeric").kendoNumericTextBox({
    format: "# \%"
});

but when I give it a value of 3, it still gives me 300%!

From the Kendo documentation:

"%" - percentage placeholder Multiplies a number by 100 and inserts a localized percentage symbol in the result string. Note: '%' symbol is interpreted as a format specifier in the format string. If you need to prevent this, you will need to precede the '%' symbol with a backslash - 'kendo.toString(12, "# \%")' -> 12 % (en-us).

OnaBai
  • 40,767
  • 6
  • 96
  • 125
MonOve
  • 1,091
  • 13
  • 34
  • 1
    If the value is 3, it is correct print it as 300% and what is wrong is that KendoUI example. Realize that it says that is multiplied by 100. If you go to kendo.toString documentation [here](http://docs.kendoui.com/api/framework/kendo#tostring) here the example says to use `kendo.toString(0.12, "p");` for getting 12.00 %. So you should use `0.03` for getting `3%` – OnaBai Jan 02 '13 at 23:00

4 Answers4

5

I was working in a column of a grid in a .cshtml file and for me the following is working:

  Format("{0:#.## \\'%'}");

notice the two single quotes arround the % sign.

Joost Pielage
  • 137
  • 2
  • 9
  • Working solution. It seems that single quotes are crucial when grid is initialized using ASP.NET MVC helpers. – Andrzej Sep 04 '15 at 10:55
4

Did you see this forum thread? It looks like you need to escape it with two slashes...

http://jsbin.com/aruqeh/1/

Burke Holland
  • 2,325
  • 1
  • 22
  • 33
4
$("#numeric").kendoNumericTextBox({
  format: "# \\%"
});
Danubian Sailor
  • 1
  • 38
  • 145
  • 223
Janie B
  • 293
  • 2
  • 7
0

As an addition to the other answers on here, I'd like to add that if you're using Kendo UI with ASP.NET Razor view syntax, and your format string has to be passed in from the input tags themselves, you'll need to turn the Kendo UI format string into a string literal, or JavaScript will end up escaping your escape characters. For example, in an application I'm working on now, we have a custom data field for format that an html helper uses to create the Kendo NumericTextBox.

Example:

<input data-custformat="##.##\\%" value="12"/>

fails to render the format correctly. The output looks like 1200\%, as the double backslash is escaped to a single backslash, and the field maintains the default Kendo percentage behavior of multiplying the field's value by 100.

However,

<input data-custformat=@(@"##.##\%") />

formats the number correctly, and overrides the default Kendo percentage behavior. Notice that in the string literal, only a single backslash is used.

This is a somewhat niche and subtle issue, but caused a bit of frustration while trying to integrate Kendo UI with ASP.NET MVC.

Kandano
  • 1
  • 1