Column Display Format

You can set a C# format string to the column so that it renders the values with the corresponding styling according to the current culture of the thread.

Basics

To set the desired format string, use the DisplayFormat parameter of the column.

If the model field has the DataFormatString set through the DisplayFormat DataAnnotation attribute, the grid will honor that without an explicit setting in the markup of the column.

You can use the standard C# formatting options, because the grid uses a string.Format call: MSDN: Format types in .NET.

Example

Use C# format strings in the grid through the component markup and a data annotation attribute in the model

@using System.ComponentModel.DataAnnotations
@* This Using is for the model class attribute only *@

<TelerikGrid Data="@GridData" Pageable="true">
    <GridColumns>
        <GridColumn Field="@nameof(SampleModel.Name)" />

        <GridColumn Field="@nameof(SampleModel.Salary)" />
        <GridColumn DisplayFormat="{0:dd MMM yy}" Field="@nameof(SampleModel.HireDate)" />

    </GridColumns>
</TelerikGrid>

@code {
    class SampleModel
    {
        public string Name { get; set; }

        [DisplayFormat(DataFormatString = "{0:C}")]
        public decimal Salary { get; set; }
        public DateTime HireDate { get; set; }
    }

    // sample data generation

    List<SampleModel> GridData { get; set; }

    protected override void OnInitialized()
    {
        Random rand = new Random();
        GridData = Enumerable.Range(1, 50).Select(x => new SampleModel
        {
            Name = $"name {x}",
            Salary = x * 20000 / 12.34m,
            HireDate = DateTime.Now.Date.AddMonths(rand.Next(-20, 20)).AddDays(rand.Next(-10, 10)),
        }).ToList();
    }
}

Notes

• Numeric, DateTime and Enum types can use such formats. String and Boolean types are displayed without such a format, however.

• The CultureInfo.CurrentCulture is used when rendering the formats, so if you need specific formats for specific users, you must set the culture of the app accordingly.

• The DisplayFormat parameter defines the format that is used to render Numeric or DateTime values when the component initializes. As it is not applied in edit mode, the editor will display the default format of the field depending on the culture. In order to customize the format when editing, together with setting the DisplayFormat parameter, you can use Editor Template for Grid or TreeList.

See Also

• Live Demo: Cell Formatting
• Blazor Grid