New to Telerik UI for Blazor? Start a free 30-day trial
Hide Grid Virtual Row Skeletons
Environment
| Product | Grid for Blazor, TreeList for Blazor |
Description
This KB article answers the following questions:
- How to remove the Grid row placeholders during virtual scrolling?
- How to hide the skeletons that appear in empty table cells during virtual scrolling?
- How to disable the Grid cell placeholders?
- How to turn off the Grid loader indicators inside the virtual rows?
Solution
Apply a display:none or visibility:hidden CSS style to the .k-skeleton selector inside Grid table cells.
Removing placeholder skeletons during virtual Grid scrolling
<TelerikGrid Data="@GridData"
Height="360px"
PageSize="20"
RowHeight="40"
ScrollMode="@GridScrollMode.Virtual"
Class="no-skeletons">
<GridColumns>
<GridColumn Field="@nameof(Product.Name)" />
<GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:c2}" />
<GridColumn Field="@nameof(Product.Quantity)" />
</GridColumns>
</TelerikGrid>
<style>
.no-skeletons .k-table-td > .k-skeleton {
display: none;
}
</style>
@code {
private List<Product> GridData { get; set; } = new();
protected override void OnInitialized()
{
for (int i = 1; i <= 1000; i++)
{
GridData.Add(new Product()
{
Id = i,
Name = $"Name {i}",
Price = Random.Shared.Next(1, 100) * 1.23m,
Quantity = Random.Shared.Next(0, 1000)
});
}
}
public class Product
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
public decimal Price { get; set; }
public int Quantity { get; set; }
}
}