New to Telerik UI for Blazor? Download free 30-day trial

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();
    }
}

The result from the code snippet above

DisplayFormat basic sample

Notes

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

  • The CurrentInfo.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.

See Also

In this article
Not finding the help you need? Improve this article