Kendo UI Cheatsheet

Formatting

About kendo.format

Replaces each format item in a specified string with the text equivalent of a corresponding object's value. Uses toString for every format item.

kendo.format('Hello {0}', 'World');
// "Hello World"

kendo.format('Yesterday, I was {0}, today is am {1}', 'sad', 'happy');
// "Yesterday, I was sad, today is am happy"

Overriding Defaults

Number formatting depends on the current culture which by default is en-US. For "en-US negative currency formatting pattern is ($n). To override this behavior:

kendo.culture().numberFormat.currency.pattern[0] = '-$n';

Parsing Date

Parse string into appropriate format.

kendo.parseDate("01/30/2016", ["MM/dd/yyyy"]);

Date Formatting

kendo.toString(new Date(), 'd');
// "1/19/2016"

kendo.toString(new Date(), 'D');
// "Tuesday, January 19, 2016"

kendo.toString(new Date(), 'F');
// "Tuesday, January 19, 2016 12:44:44 PM"

kendo.toString(new Date(), 'g');
// "1/19/2016 12:45 PM"

kendo.toString(new Date(), 'M');
// "January 19"

kendo.toString(new Date(), 'u');
// "2016-01-19 12:46:18Z"

Full list of patterns: http://docs.telerik.com/kendo-ui/framework/globalization/dateformatting

Currency Formatting

kendo.format("{0:c}", -9999);
// ($9,999.00) or -$9,999.00 depending upon your locale. 

kendo.format("{0:c}", 9999);
// $9,999.00

Percentage Formatting

kendo.format("{0:p}", 0.2);
// "20.00 %"

kendo.format("{0:p}", 0.02);
// "2.00 %"

kendo.format("{0:p}", 0.002);
// "0.20 %"

kendo Template

Script tag:

<script id="some-template" type="text/x-kendo-template">
</script>

Render values as HTML: #= #

Uses HTML encoding to display values: #: #

Execute arbitrary Javascript code: # if (true) { # ... non-script content here ... # } #