Creating Templates

• Jun 24, 2024
• 2 minutes to read

You can create templates using one of the following approaches:

• Using the Template Designer
• Using Markup

Using the Template Designer

1. To enter the template editing mode, click the Grid View’s smart tag and click Edit Templates in the invoked menu.

   

2. In the template editing mode, the Visual Studio Design view displays the Template Designer allowing you to edit templates using standard design-time tools.

   Select the template to edit by clicking the Grid View’s smart tag and choosing it from the Display list.

   

3. You can add a control to a template by dragging it from the toolbox and dropping it in the Template Designer’s client area. In this example, grid data rows are configured to display data in read-only text boxes.

   

4. To bind a control in a template to data, click the control’s smart tag and select the Edit DataBindings option in the invoked menu. Select a property that you want to bind to data and specify which data field to bind to in the invoked dialog.

   

   The produced markup uses the default ASP.NET data binding expression syntax:

   ASPX

   <Templates>
       ...
       <DataRow>
           <dx:BootstrapTextBox ID="BootstrapTextBox1" runat="server" Text='<%# Eval("ShipCountry") %>'>
           </dx:BootstrapTextBox>
       </DataRow>
   </Templates>
   

Run the application and open the page in a browser to view the result.

Using Markup

The Grid View control utilizes the standard ASP.NET templating mechanism. Each template is an object implementing the ITemplate interface and can be declared using the ASP.NET markup syntax.

Templates are declared within the BootstrapGridView.Templates property. The code sample below demonstrates how to use a template to customize a preview row’s layout.

ASPX

<dx:BootstrapGridView ID="BootstrapGridView1" runat="server" ... >
    ...
    <Settings ShowPreview="true" />
    <Templates>
        <PreviewRow>
            <%# Eval("Notes") %>
        </PreviewRow>
    </Templates>
</dx:BootstrapGridView>

Some templates can be declared for a specific column. You can access such templates through a column object’s corresponding properties:

ASPX

<dx:BootstrapGridView ID="BootstrapGridView1" runat="server" ... >
    ...
    <Columns>
        ...
        <dx:BootstrapGridViewTextColumn Caption="Details" VisibleIndex="4">
            <DataItemTemplate>
                <dx:BootstrapButton ID="MoreBtn" Text="More Info" ... ></dx:BootstrapButton>
            </DataItemTemplate>
        </dx:BootstrapGridViewTextColumn>
    </Columns>
</dx:BootstrapGridView>