New to Kendo UI for Angular? Start a free 30-day trial

Column Formats

The purpose of the formatting is to convert a Number and Date object to a human-readable string by using the culture-specific settings.

To apply specific column formatting, set the format option to the <kendo-grid-column> tag.

html

<kendo-grid>
   <kendo-grid-column field="UnitPrice" format="n2"></kendo-grid-column>
</kendo-grid>

Depending on the data type, the format option accepts different values.

Number Column Formatting
Date Column Formatting

The format is applied to the built-in filter components as well. For more details, refer to the Date Filter documentation section.

Number Column Formatting

You can set the format option to:

Predefined number formats
Number format objects
Custom number formats

Predefined Number Formats

The predefined number formats are string literal specifiers which format numbers based on the locale.

html

<kendo-grid>
    <kendo-grid-column field="UnitPrice" format="n2"></kendo-grid-column>
</kendo-grid>

The supported predefined format specifiers are:

n—Formats the number as a decimal number based on the locale. To specify the precision, you can add a number after the n. By default, the number is formatted and rounded to three decimal digits.
c—Formats the number as a currency based on the locale. The latest currency symbol of the specified locale is used for the formatting. To specify the precision, add a number after c.
a—The same as the c specifier except that the a specifier uses the currency accounting format.
p—Formats the number as a percentage based on the locale. The passed number is multiplied by 100. To specify the precision, add a number after p. By default, the number is formatted and rounded to zero decimal digits.
e—Formats the number in exponential notation.

The following example demonstrates the predefined number format specifiers in action.

Change Theme

Theme

Loading ...

Number Format Objects

You can also format the Grid column by setting the format option to a NumberFormatOptions object.

html

<kendo-grid>
    <kendo-grid-column
        field="UnitPrice"
        [format]="{ style: 'currency', currency: 'EUR', currencyDisplay:'name' }"
    ></kendo-grid-column>
</kendo-grid>

The following example demonstrates how to format the Grid column using NumberFormatOptions object.

Change Theme

Theme

Loading ...

When the predefined format options do not fit the requirements, you can create a custom number format string by using one or more custom number specifiers. This approach is useful when you want to format a percentage value without multiplying the number by 100 or when the number should appear as is (without setting decimal points).

The supported format specifiers are:

0—A zero placeholder. It replaces the zero with the corresponding digit if one is present. Otherwise, zero appears in the result string.
#—A digit placeholder. It replaces the Pound sign with the corresponding digit if one is present. Otherwise, no digit appears in the result string.
.—A decimal placeholder. It determines the location of the decimal separator in the result string.
,—A group separator placeholder. It inserts a localized group separator between each group.
%—A percentage placeholder. It multiplies a number by 100 and inserts a localized percentage symbol in the result string.
$—A currency placeholder. It is replaced by the locale currency symbol.
;—A section separator. It defines sections with separate format strings for positive, negative, and zero numbers.
string or 'string'—A literal string delimiter. It indicates that the enclosed characters should be copied to the result string.
\—The backslash indicates that the next character should be treated as a literal character rather than as a special character or string delimiter.

html

<kendo-grid>
    <kendo-grid-column field="UnitPrice" format="##.## \\%"></kendo-grid-column>
</kendo-grid>

The following example demonstrates the custom number format specifiers in action.

Change Theme

Theme

Loading ...

Date Column Formatting

You can set the format option to:

Predefined date formats
Date format objects
Custom date formats

Predefined Date Formats

The predefined date formats are specifiers that convert a valid JavaScript Date object into a human readable date or time based on the locale.

html

<kendo-grid>
   <kendo-grid-column field="FirstOrderedOn" format="D"></kendo-grid-column>
</kendo-grid>

The following table lists the supported date format specifiers for the en locale.

Specifier	Description	Result
`d`	Short date pattern: `M/d/y`.	`10/6/2000`
`D`	Long date pattern: `EEEE, MMMM d, y`.	`Monday, November 6, 2000`
`F`	Full date and time pattern: `EEEE, MMMM d, y h:mm:ss a`.	`Monday, November 6, 2000 12:00:00 AM`
`g`	General date and time pattern (short time): `M/d/y h:mm a`.	`11/6/2000 12:00 AM`
`G`	General date and time pattern (long time): `M/d/y h:mm:ss a`.	`11/6/2000 12:00:00 AM`
`m`	Renders an abbreviated month and day pattern: `MMM d`.	`Nov 6`
`M`	Wide month and day pattern: `MMMM d`.	`November 6`
`y`	Renders an abbreviated month/year pattern: `MMM y`.	`Nov 2000`
`Y`	Wide month and year pattern: `MMMM y`.	`November 2000`
`t`	Short time pattern: `h:mm a`.	`2:30 PM`
`T`	Long time pattern: `h:mm:ss a`.	`2:30:45 PM`
`s`	Renders a universal sortable local date and time pattern: `yyyy-MM-dd HH:mm:ss`.	`2000-11-06T00:00:00`
`u`	Renders a universal sortable UTC date and time pattern: `yyyy-MM-dd HH:mm:ssZ`.	`2000-11-06 00:00:00Z`

The following example demonstrates the predefined date format specifiers in action.

Change Theme

Theme

Loading ...

Date Format Objects

You can format the Grid date column by setting the format option to an object. The supported types of format options are:

Predefined formats (defined by the Unicode Locale Data Markup Language)—Sets the format from the dateFormats, timeFormats, and dateTimeFormats elements of the calendar.
html
```
<kendo-grid-column
    field="FirstOrderedOn"
    [format]="{ date: 'long' }">
</kendo-grid-column>
```
Skeleton formats—Sets the format from the availableFormats of the calendar based on the date fields that you want to display.
html
```
<kendo-grid-column
    field="FirstOrderedOn"
    [format]="{ skeleton: 'yMMMdEHm' }">
</kendo-grid-column>
```
Fields formats—Similar to the skeleton formats except that you need to set the required fields by using separate options in the same way as the Intl.DateTimeFormat object.
html
```
<kendo-grid-column
    field="FirstOrderedOn"
    [format]="{ year: 'numeric', month: 'long' }">
</kendo-grid-column>
```

The following example demonstrates the date format objects in action.

Change Theme

Theme

Loading ...

Custom Date Formats

When the predefined date format options do not fit the requirements, you can create a custom date format string by using one or more custom date specifiers. This approach is useful when you want to format dates in a specific format.

html

<kendo-grid [kendoGridBinding]="gridData">
    <kendo-grid-column ... format="dd MMM"></kendo-grid-column>
    <kendo-grid-column ... format="QQQQ y"></kendo-grid-column>
    <kendo-grid-column ... format="HH:mm:ss"></kendo-grid-column>
</kendo-grid>

The following table lists the supported format specifiers that can be used in custom date formats:

Specifier	Description	Result
`y`	Renders the year.	`y`—Full year and month (Sep 1996). `yy`—Two digit year (96). `yyy`, `yyyy`—Full year (1996).
`M`	Renders the month.	`M`—Numerical month (1). `MM`—Zero-padded numerical month (01). `MMM`—Abbreviated month (Jan). `MMMM`—Wide month name (January). `MMMMM`—Narrow month name (J).
`L`	The same as the `M` specifier except that the `L` specifier uses the standalone names.	See `M`.
`d`	Renders the day of the month.	`y d`—Day of month (1996 8). `y dd`—Zero-padded day of month (1996 08).
`E`	Renders the day of the week.	`E`, `EE`, `EEE`—Abbreviated day name (Wed). `EEEE`—Wide day name (Wednesday). `EEEEE`—Narrow day name (W). `EEEEEE`—Short day name (We).
`e`	The same as the `E` specifier except that it adds a numeric value that depends on the local starting day of the week.	`e`—Numeric day of the week (3). `ee`—Zero-padded numeric day of the week (03).
`c`	The same as the `e` specifier except that it uses the standalone names.	See `e`.
`a`	Renders the day period.	`a`, `aa`, `aaa`—Short day period name(AM). `aaaa`—Wide day period name (AM). `aaaaa`—Narrow day period name (a).
`h`	Renders the hour using a 12-hour clock from 1 to 12.	`h a`—Show hour (1 PM). `hh a`—Zero-padded hour (01 PM).
`H`	Renders the hour using a 24-hour clock from 1 to 23.	`H:mm`—Show hour (1:00). `HH:mm`—Two digits hour (13:00).
`k`	Renders the hour using a 24-hour clock from 1 to 24.	`k`—Show hour (24). `kk`—Two digits hour (01).
`K`	Renders the hour using a 12-hour clock from 0 to 11.	`K a`—Show hour (1 AM). `KK a`—Two digits hour (01 PM).
`m`	Renders the minutes from 0 to 59.	`H:m`—Show minutes (1:1). `H:mm`—Two digits minutes (1:01).
`s`	Renders the seconds from 0 to 59.	`HH:mm:s`—Show seconds (01:01:1). `HH:mm:ss`—Two digits seconds (01:01:01).
`S`	Renders the fractional seconds. It truncates based on the number of letters.	`s.S`—Show fractional seconds (1.1). `s.SS`—Two digits fractional seconds (1.12). `s.SSS`—Three digits fractional seconds (1.123).
`q`	The same as the `Q` specifier except that the `q` specifier uses the standalone names.	See `Q`.
`Q`	Renders a quarter of the year.	`Q`, `QQ`—Numerical quarter (3). `QQQ`—Abbreviated quarter (Q3). `QQQQ`—Wide quarter name (3rd quarter). `QQQQQ`—Narrow quarter name (3).
`z`	Renders the timezone.	`z`, `zz`, `zzz`—Short localized GMT format (GMT+2). `zzzz`—Long localized GMT format (GMT+02:00).
`Z`	Renders the timezone.	`Z`, `ZZ`, `ZZZ`—Show the `ISO8601` format with hours and minutes (+0200). `ZZZZ`—Long localized GMT format (GMT+02:00). `ZZZZZ`—Extended `ISO8601` format (+02:00).
`x`	The same as the `X` specifier except that the `x` specifier does not add the UTC indicator when the offset is `0` (zero).	See `X`.
`X`	Renders the timezone.	`X`—Show the `ISO8601` format with hours and optional minutes (+02). `XX`, `XXXX`—Show the `ISO8601` format with hours and minutes (+0200). `XXX`, `XXXXX`—Extended `ISO8601` format (+02:00).
`G`	Renders the era name.	`Q`, `QQ`, `QQQ`—Abbreviated era (AD). `QQQQ`—Wide era name (Anno Domini). `QQQQQ`—Narrow era name (A).

The following example demonstrates the custom date format specifiers in action.

Change Theme

Theme

Loading ...

Column Formats

Number Column Formatting

Predefined Number Formats

Number Format Objects

Custom Number Formats

Date Column Formatting

Predefined Date Formats

Date Format Objects

Custom Date Formats

Suggested Links