Templates in Blazor Grid

• Aug 12, 2025
• 5 minutes to read

Grid templates are RenderFragment<TValue> type properties. These render fragments can contain both markup and other Razor components. A template’s Razor markup can access an implicit parameter named context. This parameter is derived from the TValue type and contains template-related members.

<DxGrid Data="Products" ShowSearchBox="true">
    <Columns> ... </Columns>
    <SearchBoxTemplate> 
        <DxSpinEdit Value="GetSpinEditValue(context.SearchText)"
                    ValueChanged="(int? v) => context.SearchText = v.ToString()"
                    ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto" />
    </SearchBoxTemplate>
</DxGrid>

You can use the Context attribute to change the parameter name. This name change is essential when you nest components that contain RenderFragment<TValue> properties, otherwise, the following error can occur: The child content element ‘ChildContent’ of component ‘X’ uses the same parameter name (‘context’) ….

<EditFormTemplate Context="editFormContext">
    <DxFormLayout>
        <DxFormLayoutItem Caption="First Name:">
            @editFormContext.GetEditor("FirstName")
        </DxFormLayoutItem>
        <DxFormLayoutItem Caption="Last Name:">
            @editFormContext.GetEditor("LastName")
        </DxFormLayoutItem>
    </DxFormLayout>
</EditFormTemplate>

Run Demo: Column Templates Run Demo: Group Row Template Run Demo: Toolbar

Data Column Templates

This section lists data column properties that allow you to create templates for various elements.

Element	Property
Column Header Caption	HeaderCaptionTemplate
Filter Row Cell	FilterRowCellTemplate
Group Row	GroupRowTemplate
Cell (Edit Mode)	CellEditTemplate
Cell (Display Mode)	CellDisplayTemplate
Column Group Footer	GroupFooterTemplate
Column Footer	FooterTemplate
Column Filter Menu	FilterMenuTemplate

Command Column Templates

This section lists command column properties that allow you to create templates for various elements.

Element	Property
Column Header	HeaderCaptionTemplate, HeaderTemplate
Filter Row Cell	FilterRowCellTemplate
Cell (Edit Mode)	CellEditTemplate
Cell (Display Mode)	CellDisplayTemplate
Column Group Footer	GroupFooterTemplate
Column Footer	FooterTemplate

Selection Column Templates

This section lists selection column properties that allow you to create templates for various elements.

Element	Property
Column Header	HeaderCaptionTemplate, HeaderTemplate
Filter Row Cell	FilterRowCellTemplate
Cell (Display Mode)	CellDisplayTemplate
Column Group Footer	GroupFooterTemplate
Column Footer	FooterTemplate

Grid-Level Templates

This section lists template properties available on the component level. These properties serve two main purposes:

• Modify elements that are not part of columns.
• Specify templates that apply to all columns of a particular type.

Element	Grid Property
Search Box	SearchBoxTemplate
Edit Form	EditFormTemplate
Detail Row	DetailRowTemplate
Cell (Display Mode)	DataColumnCellDisplayTemplate
Cell (Edit Mode)	DataColumnCellEditTemplate
Empty Data Area	EmptyDataAreaTemplate
Column Header Caption	ColumnHeaderCaptionTemplate
Toolbar	ToolbarTemplate
Filter Row Cell	DataColumnFilterRowCellTemplate
Column Filter Menu	DataColumnFilterMenuTemplate
Group Row	DataColumnGroupRowTemplate
Column Footer	ColumnFooterTemplate
Column Group Footer	ColumnGroupFooterTemplate

GitHub Examples

• How to use DxUpload component to upload images to the grid
• How to edit a row on a separate page
• Use the DxTagBox control to filter a column against multiple values
• Create a custom record deletion confirmation dialog
• How to add a nested Grid to create a master-detail layout
• Master-Detail with partial loading
• Incorporate a selector for filter row operator type
• How to implement a date range filter
• Use icons instead of default command buttons

Task-Based Examples

This section contains code samples that demonstrate template functionality.

Create a Template an Runtime

You can specify a template as a method that returns required content (RenderFragment<TValue>). If the method returns null, the Grid renders the default element.

The following code snippet demonstrates two options used to specify the template - in the markup and in the AfterRender method.

<DxGrid Data="@forecasts" ShowFilterRow="true" @ref="Grid" >
    <Columns>
        <DxGridDataColumn FieldName="Date" FilterRowCellTemplate="GetFilterTemplate(true)" />
        <DxGridDataColumn FieldName="Temperature" FilterRowCellTemplate="GetFilterTemplate(false)" />
        <DxGridDataColumn FieldName="Summary" />
    </Columns>
</DxGrid>

@code {
    protected override void OnAfterRender(bool firstRender) {
        if (firstRender) {
            Grid.BeginUpdate();
            var column = Grid.GetDataColumns().First(c => c.FieldName == "Summary");
            column.CellDisplayTemplate = context => {
                return @<text><h1>@context.DisplayText</h1></text>;
            };
            column.FilterRowCellTemplate = GetFilterTemplate(false);
            Grid.EndUpdate();
        }
        base.OnAfterRender(firstRender);
    }
    RenderFragment<GridDataColumnFilterRowCellTemplateContext> GetFilterTemplate(bool isCustom) {
        if (!isCustom) return null;
        return context => {
            return __builder => {
                <DxDateEdit Date="(DateTime?)context.FilterRowValue"
                    DateChanged="(DateTime? v) => context.FilterRowValue = v" />
            };
        };
    }
}

Custom Pager

DxGrid does not support a template for the pager. However, you can set the PagerVisible property to false to hide the default pager and use custom components for navigation.

In the following code snippet, an external DxPager component allows users to navigate between pages.

.grid-container {
    width: 950px;
}
.pager-container {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    border: 1px solid #d2d2d2;
    border-top: none;
}

<div class="grid-container">
    <DxGrid Data="Data" @bind-PageIndex="@ActivePageIndex" PagerVisible="false" PageSize="6" >
        <Columns>
            <DxGridDataColumn FieldName="ContactName" />
            <DxGridDataColumn FieldName="CompanyName" />
            <DxGridDataColumn FieldName="Country" />
            <DxGridDataColumn FieldName="City" />
        </Columns>
    </DxGrid>
    <div class="pager-container">
        <DxPager PageCount="@PageCount" @bind-ActivePageIndex="@ActivePageIndex" />
        <div>
            <DxButton Text="Custom Button 1" />
            <DxButton Text="Custom Button 2" />
        </div>
    </div>
</div>

@code {
    IEnumerable<object> Data { get; set; }
    int PageCount { get; set; }
    int ActivePageIndex { get; set; } = 1;

    protected override async Task OnInitializedAsync() {
        Data = await NwindDataService.GetCustomersAsync();
        PageCount = (int)Math.Ceiling((decimal)Data.Count()/6);
    }
}

Display Images in Grid Cells

To display an image from a binary source, place an <img> element into CellDisplayTemplate and specify the src property. Review an example below:

<DxGridDataColumn FieldName="ImageData">
    <CellDisplayTemplate>
        <img style="width: 300px;" 
        src="@String.Format("data:image/gif;base64,{0}", Convert.ToBase64String((byte[])context.Value))" />
    </CellDisplayTemplate>
</DxGridDataColumn>

Display Links in Grid Cells

To display links in grid cells, implement a CellDisplayTemplate and add a link element to it.

The following code snippet displays the following links in a grid:

• A link that sends an email.
• A link that shows additional information.

<DxGrid Data="@employees" >
    <Columns>
        <DxGridDataColumn FieldName="FirstName" />
        <DxGridDataColumn FieldName="LastName" />
        <DxGridDataColumn FieldName="HireDate" />
        <DxGridDataColumn FieldName="Email">
            <CellDisplayTemplate>
                <a href="@("mailto:" + (string)(context.Value))">@((string)(context.Value))</a>
            </CellDisplayTemplate>
        </DxGridDataColumn>
         <DxGridDataColumn FieldName="ID" Caption="Notes">
            <CellDisplayTemplate>
                <a class="d-block text-left" href="javascript:;" 
                    @onclick="() => ShowDetails(context)">More Info...</a>
            </CellDisplayTemplate>
        </DxGridDataColumn>
    </Columns>
</DxGrid>

@code {
    Employee[]? employees;
    protected override async Task OnInitializedAsync() {
        employees = await EmployeeData.GetData();
    }
    public void ShowDetails(GridDataColumnCellDisplayTemplateContext context) {
        Employee CurrentEmployee = employees.Where(e => e.ID == (int)context.Value).FirstOrDefault();
        string EmployeeInfo = CurrentEmployee != null ? CurrentEmployee.Notes : "";
        // ...
    }
}

View Example: Blazor Grid - How to display detail information using DxFormLayout