Last Updated: 27 Jan 2021 17:32 by ADMIN
Created on: 27 Jan 2021 15:11
Category: UI for Blazor
Type: Feature Request
Grid header row
Is it possible to add a header row for an entire Blazor Grid?  I don't mean a column row, group row, or a command row, I mean a header row for the entire grid.  E.g. I want a row at the top of the grid not related to my model, but which can contain things like instructions, etc.
1 comment
Nadezhda Tacheva
Posted on: 27 Jan 2021 17:32

Hello De,

To achieve the desired result I would suggest using the Grid Toolbar.

Apart from the usual Grid elements that you can have in the Toolbar (such as button for adding new records, Searchbox etc.) you can add some custom content - in your case, for example, that could be a div with instructions. You can set a custom CSS class to that div and add the desired styling.

If you want to only have custom content in the Toolbar, that approach will work just fine. However, of you also want to include additional elements (for example a button for adding new records) there is an important point in terms of positioning them -  the Toolbar container with classes .k-toolbar and .k-grid-toolbar has display: flex property, so if you want your custom container to be expanded to the width of the whole row, set its flex-basis property to 100%.

To better illustrate how the described setup would look, I have created the following example:


    .custom-header-row {
        flex-basis: 100%;
        border: inherit;

<TelerikGrid Data="@MyData" Height="600px"
             Pageable="true" Sortable="true" 
             Resizable="true" Reorderable="true">
        <div class="custom-header-row"><h3>Custom header row with instructions</h3></div>
        <GridCommandButton Command="Add" Icon="add">Add Employee</GridCommandButton>
        <GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
        <GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" Groupable="false" />
        <GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
        <GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />

@code {
    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
        Id = x,
        Name = "name " + x,
        Team = "team " + x % 5,
        HireDate = DateTime.Now.AddDays(-x).Date

    public class SampleData
        public int Id { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public DateTime HireDate { get; set; }


Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at