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 alignment set through parameter TextAlign used for Price and In Stock columns.

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.

1Chai$18.00Available3910 boxes x 20 bags
2Chang$19.00Available1724 - 12 oz bottles
3Aniseed Syrup$10.00Available1312 - 550 ml bottles
4Chef Anton's Cajun Seasoning$22.00Available5348 - 6 oz jars
5Chef Anton's Gumbo Mix$21.35Not Available036 boxes
6Grandma's Boysenberry Spread$25.00Available12012 - 8 oz jars
7Uncle Bob's Organic Dried Pears$30.00Available1512 - 1 lb pkgs.
8Northwoods Cranberry Sauce$40.00Available612 - 12 oz jars
9Mishi Kobe Niku$97.00Not Available2918 - 500 g pkgs.
10Ikura$31.00Available3112 - 200 ml jars
  • Cell-formatting.razor
  • ProductService.cs
  • ProductBindingModel.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.
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.

Support & Learning Resources

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