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.

Copy Code<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.

Copy Code<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.

Number Format Objects

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

Copy Code<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.

Custom Number Formats

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.

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

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

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.

Copy Code<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.

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

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.

  Copy Code<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.

  Copy Code<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.

  Copy Code<kendo-grid-column
      field="FirstOrderedOn"
      [format]="{ year: 'numeric', month: 'long' }">
  </kendo-grid-column>

The following example demonstrates the date format objects in action.

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.

Copy Code<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:

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

Suggested Links

• Parsing and Formatting of Dates and Numbers
• Kendo Intl Date Formatting
• Kendo Intl Number Formatting
• API Reference of the ColumnComponent
• API Index of the Grid
• Unicode Locale Data Markup Language