Pager on top of the Grid and ToolBar at the bottom

Environment

Product

Grid for Blazor

Description

I want to move the Pager on top of the Grid and have a Toolbar with some action buttons at the bottom. How to achieve this?

How to move Pager on top of the Grid? How to move Toolbar at the bottom of the Grid?

Solution

At the time of writing (Telerik UI for Blazor version 3.2.0), by default, the Grid Toolbar is placed on top of the Grid and Pager - at the bottom. Controlling the position of the Toolbar and Pager will be supported out of the box in future version of the product.

For the time being, this scenario can be handled with a custom approach.

It is possible to integrate a separate Pager component in the Grid Toolbar - this demo demonstrates how it can be achieved. This will suffice if you do not need to use the Toolbar for other content.

If, however, you also want to have a Toolbar for some actions, do the following:

• Integrate Pager in the Grid Toolbar on top of the Grid
• Hide the built-in Pager at the bottom of the Grid with custom CSS
• Add a container below the Grid to serve as a Toolbar - place your desired custom Toolbar actions in it
• Add the "k-toolbar" and "k-grid-toolbar" classes to this container to inherit the Grid Toolbar styles
• Add your custom class as well, so you can target this container and style it separately from the built-in Toolbar if needed

<style>
    .k-grid-toolbar {
        padding: 0;
    }

    .k-grid-toolbar .k-pager-wrap {
        border: 0;
        flex-grow: 1;
    }

    .k-grid-pager {
        display: none;
    }

    .custom-toolbar.k-toolbar.k-grid-toolbar {
        padding: 8px;
        border: 1px solid rgba(0,0,0,0.08);
        border-top: none;
    }
</style>

<TelerikGrid Data="@GridData"
             Pageable="true"
             @bind-Page="@CurrentPage"
             PageSize="@PageSize">
    <GridToolBarTemplate>
        <TelerikPager Total="@GridData.Count()" @bind-Page="@CurrentPage" PageSize="@PageSize" />
    </GridToolBarTemplate>
    <GridColumns>
        <GridColumn Field="Name" Title="Product Name" />
        <GridColumn Field="Price" />
        <GridColumn Field="@(nameof(Product.Released))" />
        <GridColumn Field="@(nameof(Product.Discontinued))" />
    </GridColumns>
</TelerikGrid>

<div class="custom-toolbar k-toolbar k-grid-toolbar">
    @*custom add button*@
    <TelerikButton>Add</TelerikButton>

    @*some custom action button*@
    <TelerikButton>Custom action</TelerikButton>

    @*spacer*@
    <span class="k-toolbar-spacer"></span>

    @*custom SearchBox*@
    <TelerikTextBox @bind-Value="TBValue" PlaceHolder="Search..."></TelerikTextBox>
</div>

@code {
    List<Product> GridData { get; set; }
    int CurrentPage { get; set; } = 1;
    int PageSize { get; set; } = 10;
    string TBValue { get; set; }

    protected override void OnInitialized()
    {
        GridData = Enumerable.Range(1, 30).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; }
    }
}

Notes

The downside of the listed approach is that you will not be able to use built-in Grid actions in the custom toolbar container as it is not essentially part of the Grid (for example, Add Command Button, SearchBox).

To handle this, you may proceed with a custom approach:

• Add Command Button - use a TelerikButton instead. Handle its OnClick to programmatically initiate inserting of an item through the Grid State.

• SearchBox - Use TelerikTextBox instead. Handle its ValueChanged or OnChange event to create custom filter descriptors.