Create Templates

• Nov 15, 2022
• 3 minutes to read

Use the Grid View control’s Template Designer to edit templates in a visual interface or write template markup directly in the .aspx file.

Run Demo: Templates

Use the Template Designer

The Template Designer allows you to edit Grid View templates in a graphical user interface. In the template designer, you can drag and drop controls from the Visual Studio toolbox onto the currently edited template’s design surface.

Use the steps described below to create a template in the Template Designer:

1. Switch Visual Studio to the Design view.

   Click the Grid View control’s smart tag to invoke the ASPxGridView Tasks menu and select the Edit Templates task to activate the template editing mode.

   Click the Grid View’s smart tag once again and select the template that you want to edit in the invoked menu.

   

   As an alternative, right-click the Grid View to invoke its context menu and select the template to edit in the Edit Template submenu.

2. Drag and drop controls from the Visual Studio toolbox onto the template’s design surface to create the template’s layout.

   

   You can specify properties for the controls in the Properties panel or in markup.

3. To bind a control within a template to data, invoke the control’s Tasks menu and select the Edit DataBindings… task.

   Select the property to bind in the Bindable properties list and the data field in the Bound to dropdown.

   

4. When the template is ready, click End Template Editing in the Tasks menu.

   

The image below illustrates the result:

Use ASPX Markup

In advanced usage scenarios, templates may require additional HTML markup or multiple levels of nested tags. In such cases, you can write markup for a template directly within the corresponding property of the ASPxGridView or its column. You can also use this technique to fine-tune the markup generated by the template designer. Use the steps described below to achieve this:

1. In the .aspx file, insert an element that identifies the template that you want to create inside the ASPxGridView’s or a column’s markup. Refer to the Grid Elements that Support Templates topic for the full list of available options.

   ASPX

   <dx:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="False" 
      DataSourceID="SqlDataSource1" KeyFieldName="EmployeeID">
      <Templates>
          <PreviewRow>
   
          </PreviewRow>
      </Templates>
      <Settings ShowPreview="true" />
      ...
   </dx:ASPxGridView>
   

2. Add the template’s contents (HTML tags or other Web controls). Use the Inline Expressions syntax and the Eval data binder function to retrieve a control’s property value for the current row at run time.

   ASPX

   <dx:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="False" 
       DataSourceID="SqlDataSource1" KeyFieldName="EmployeeID">
       <Templates>
           <PreviewRow>
               <dx:ASPxPageControl ID="ASPxPageControl1" runat="server" ActiveTabIndex="0">
                   <TabPages>
                       <dx:TabPage Text="Location">
                           <ContentCollection>
                               <dx:ContentControl>
                                   <div>
                                       <dx:ASPxLabel ID="ASPxLabel1" runat="server" Text="City: " />
                                       <dx:ASPxLabel ID="ASPxLabel2" runat="server" Text='<%# Eval("City") %>' />
                                   </div>
                                   ...
                               </dx:ContentControl>
                           </ContentCollection>
                       </dx:TabPage>
                       <dx:TabPage Text="Notes">
                           <ContentCollection>
                               <dx:ContentControl>
                                   <dx:ASPxLabel ID="ASPxLabel8" runat="server" Text='<%# Eval("Notes") %>'/>
                               </dx:ContentControl>
                           </ContentCollection>
                       </dx:TabPage>
                   </TabPages>
               </dx:ASPxPageControl>
           </PreviewRow>
       </Templates>
       <Settings ShowPreview="true" />
       ...
   </dx:ASPxGridView>
   

The image below illustrates the result:

More Information

Available Templates

Refer to the Grid Elements that Support Templates article for the full list of customizable elements along with the names of the properties used to specify the templates.

Template Replacements

When you create a template for the Edit Form or Pager, you can use the ASPxGridViewTemplateReplacement control to display standard grid interface elements (edit cells, Update and Cancel buttons, pager) within a template’s layout.

Use the ASPxGridViewTemplateReplacement.ReplacementType property to specify the element to display.

See the Template Replacements article for more information.