Hide Grid Pager When Data is Null or Empty
Environment
| Product | Grid for Blazor, TreeList for Blazor |
Description
This KB article answers the following questions:
- How to remove or hide the Grid pagination section when there are no available records?
- How to disable Grid paging when the data source is null or empty?
- How to make the value of the pager input (
PagerInputType.Input) zero when the Grid has no data?
Solution
The following information applies to the Grid and TreeList. The two components reuse CSS classes and styles.
When Pageable="true", the Grid renders a pager at all times, no matter how many items the component shows.
If there are no items, the Grid pager will show "Page 1 of 0" and "0 - 0 of 0 items".
When the Grid has no items, you can hide the pager or some pager elements in two ways:
- Enable and disable
Pageableconditionally. - Apply a CSS
Classconditionally and use it to hide parts of the pager or the whole pager.
The following example demonstrates both options.
Hide Grid Pager conditionally
<TelerikButton OnClick="@ToggleGridData"
ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">
Toggle Grid Data
</TelerikButton>
<h2>Hide Pager with Pageable</h2>
<TelerikGrid Data="@GridData"
Pageable="@GridHasData"
PageSize="3"
AutoGenerateColumns="true"
Height="160px" />
<h2>Hide Pager with Class</h2>
<TelerikGrid Data="@GridData"
Pageable="true"
PageSize="3"
AutoGenerateColumns="true"
Class="@( GridHasData ? string.Empty : "no-pager" )"
Height="160px" />
<style>
.no-pager > .k-grid-pager {
display: none;
}
</style>
<h2>Hide Pager Textbox with Class</h2>
<TelerikGrid Data="@GridData"
Pageable="true"
PageSize="3"
AutoGenerateColumns="true"
Class="@( GridHasData ? string.Empty : "no-pager-input" )"
Height="160px">
<GridSettings>
<GridPagerSettings InputType="@PagerInputType.Input" />
</GridSettings>
</TelerikGrid>
<style>
.no-pager-input > .k-grid-pager .k-pager-input {
display: none;
}
</style>
<h2>Hide Pager Label with Class</h2>
<TelerikGrid Data="@GridData"
Pageable="true"
PageSize="3"
AutoGenerateColumns="true"
Class="@( GridHasData ? string.Empty : "no-pager-info" )"
Height="160px" />
<style>
.no-pager-info > .k-grid-pager .k-pager-info {
display: none;
}
</style>
@code {
private List<Product> GridData { get; set; } = new();
private List<Product> RawData { get; set; } = new();
private bool GridHasData => GridData != null && GridData.Count > 0;
private void ToggleGridData()
{
GridData = GridData.Count > 0 ? new List<Product>() : RawData;
}
protected override void OnInitialized()
{
var rnd = new Random();
for (int i = 1; i <= 5; i++)
{
RawData.Add(new Product()
{
Id = i,
Name = $"Product {i}",
Stock = rnd.Next(0, 50)
});
}
}
public class Product
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
public int Stock { get; set; }
}
}