Change Grid Font Size
Environment
| Product | Grid for Blazor |
Description
How to change the Grid font size? How to set custom font styles?
Solution
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,
/* column and filter menu */
.k-popup,
.k-popup .k-input,
.k-popup .k-picker,
.k-popup .k-button,
/* dropdowns */
.k-popup .k-list {
font-size: 12px;
}
</style>
<TelerikGrid Data="@GridData"
Class="font-size"
Pageable="true"
Sortable="true"
Groupable="true"
ShowColumnMenu="true"
EditMode="GridEditMode.Inline"
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="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
<GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
@code {
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; }
}
}