New to Telerik UI for Blazor? Download Free 30-day trial
Grid - Cell Formatting
- EXAMPLE
- VIEW SOURCE
- EDIT IN TELERIK REPL
- Change Theme
default
The demo illustrates:
-
The Column
DisplayFormatparameter for the Price column set toCfor currency according to the current culture. -
Conditional row and cell formatting (styling) based on the availability of the product
through the
OnRowRenderandOnCellRenderevents. -
Column content's alignment set through parameter
TextAlignused for Price and In Stock columns. -
Header alignment set through parameter
HeaderClasson 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.
| ID | Product Name | Price | In Stock | Units | Quantity per unit |
|---|
| 1 | Chai | $18.00 | Available | 39 | 10 boxes x 20 bags |
| 2 | Chang | $19.00 | Available | 17 | 24 - 12 oz bottles |
| 3 | Aniseed Syrup | $10.00 | Available | 13 | 12 - 550 ml bottles |
| 4 | Chef Anton's Cajun Seasoning | $22.00 | Available | 53 | 48 - 6 oz jars |
| 5 | Chef Anton's Gumbo Mix | $21.35 | Not Available | 0 | 36 boxes |
| 6 | Grandma's Boysenberry Spread | $25.00 | Available | 120 | 12 - 8 oz jars |
| 7 | Uncle Bob's Organic Dried Pears | $30.00 | Available | 15 | 12 - 1 lb pkgs. |
| 8 | Northwoods Cranberry Sauce | $40.00 | Available | 6 | 12 - 12 oz jars |
| 9 | Mishi Kobe Niku | $97.00 | Not Available | 29 | 18 - 500 g pkgs. |
| 10 | Ikura | $31.00 | Available | 31 | 12 - 200 ml jars |
- Cell-formatting.razor
- ProductService.cs
- ProductDto.cs
Loading the demo source code...please wait.
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.
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.