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

Grid - Cell Formatting

The demo illustrates:
  • The Column DisplayFormat parameter for the Price column set to C for currency according to the current culture.
  • Conditional row and cell formatting (styling) based on the availability of the product through the OnRowRender and OnCellRender events.
  • Column content's alignment set through parameter TextAlign used for Price and In Stock columns.
  • Header alignment set through parameter HeaderClass on the Price column.

These features can take care of the most common formatting needs and can let you avoid declaring templates for many situations such as formatting numbers, currency, date and time, changing colors based on cell values, aligning columns based on their types and so on.

1 - 10 of 77 items
  • Cell-formatting.razor
  • ProductService.cs
  • ProductDto.cs
Loading the demo source code...please wait.

Style in ThemeBuilder

  • Custom SASS variables
  • Atomic customizations
  • Sharing projects
Start Theming

Description

This online demo showcases the different options to format and align the values in the Grid. You can use the DisplayFormat parameter of the column to pass the desired standard C# formatting string. If the model class has a DisplayFormat DataAnnotation attribute set over a field the Grid will take that into account and the DisplayFormat parameter would not be explicitly needed.
The grid columns also provide a way to specify the alignment for its content through the parameter TextAlign. You can choose from Left, Right and Center column alignment.
The grid header cells can be customized using HeaderClass to set your own CSS classes.
Another option would be to use either rendering events for the grid - the OnCellRender or the OnRowRender. In the handlers for those events you can apply conditional styling on the rows and columns based on a certain criteria. This demos shows how to format the rows based on the availability of a product.
This Blazor Data Grid Cell Formatting example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.

Support & Learning Resources

An error has occurred. This application may no longer respond until reloaded.