Change Grid Font Size
Environment
| Product | Grid for Blazor |
Description
- How to change the Grid font size?
- How to set custom font styles?
Solution
- Set a custom CSS class to the Grid through the
Classparameter. This configuration allows you to target specific Grid instances. - Use the defined class to Override the theme styles and set the desired font size to the Grid and its child components.
Change Blazor Grid Font Size
<style>
/* grid */
.k-grid.font-size,
/* grid toolbar */
.k-grid.font-size .k-toolbar,
/* grid cells */
.k-grid.font-size table,
/* textboxes */
.k-grid.font-size .k-input,
/* date pickers */
.k-grid.font-size .k-picker,
/* buttons */
.k-grid.font-size .k-button,
.k-grid.font-size .k-button-text,
/* column and filter menu */
.k-popup,
.k-popup .k-input,
.k-popup .k-picker,
.k-popup .k-button,
/*column menu dropdowns */
.k-columnmenu-item {
font-size: 12px;
}
</style>
<TelerikGrid Data="@GridData"
Class="font-size"
Pageable="true"
Sortable="true"
Groupable="true"
ShowColumnMenu="true"
FilterMode="@GridFilterMode.FilterMenu">
<GridToolBarTemplate>
<GridCommandButton Command="Add" Icon="@SvgIcon.Plus">Add</GridCommandButton>
</GridToolBarTemplate>
<GridColumns>
<GridColumn Field="Name" Title="Product Name" />
<GridColumn Field="Price" />
<GridColumn Field="@(nameof(Product.Released))" />
<GridColumn Field="@(nameof(Product.Discontinued))" />
<GridCommandColumn>
<GridCommandButton>Command Button</GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
@code {
private List<Product> GridData { get; set; }
protected override void OnInitialized()
{
GridData = Enumerable.Range(1, 20).Select(x => new Product
{
Id = x,
Name = "Product name " + x,
Price = (decimal)(x * 3.14),
Released = DateTime.Now.AddMonths(-x).Date,
Discontinued = x % 5 == 0
}).ToList();
base.OnInitialized();
}
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public decimal Price { get; set; }
public DateTime Released { get; set; }
public bool Discontinued { get; set; }
}
}