Template Replacements

• Aug 01, 2019
• 5 minutes to read

When you create a template, you often need to only extend the base control functionality. To help you easily customize the edit form and pager bar while keeping regular controls (edit cells, Update and Cancel buttons, pager), the ASPxGridViewTemplateReplacement control is designed. It allows you to put template replacements into your template; these replacements fully keep the base control functionality. Template replacements are displayed as regular controls within a grid using style settings, defining on the control level (via the ASPxGridView.Styles, ASPxGridView.StylesEditors, and ASPxGridView.StylesPager properties). The ASPxGridViewTemplateReplacement.ReplacementType property specifies the controls that are displayed by the ASPxGridViewTemplateReplacement control.

For an example on how to use the template replacements, see Grid Editing - Edit Form Template online demo.

 

The table below contains a list of the ReplacementType property values, the template types it can be used in and controls it contains.

ReplacementType property value	Template type	Contained controls
EditFormContent	GridViewTemplates.EditForm	Edit form‘s entire contents (edit cells and buttons)
EditFormEditors	GridViewTemplates.EditForm	Edit cell of each field within a grid
EditFormCellEditor	GridViewTemplates.EditForm	Edit cell
EditFormUpdateButton	GridViewTemplates.EditForm	Update button
EditFormCancelButton	GridViewTemplates.EditForm	Cancel button
Pager	GridViewTemplates.PagerBar	Pager

Edit form template replacements

Edit form template replacements allow you to add regular controls to an edit form template. Note that the regular form editors created by the ASPxGridViewTemplateReplacement control are automatically validated on the client if their validation settings are defined on a column level.

 

• Edit form’s entire content template replacement

  To show edit cells for every grid field with Upgrade and Cancel buttons within an edit form, set the ASPxGridViewTemplateReplacement.ReplacementType property to GridViewTemplateReplacementType.EditFormContent. Note that you cannot use a template replacement of this type with a replacement of the EditFormEditors or EditFormCellEditor type.

   

  The code sample below demonstrates how you can extend the functionality of a regular edit form by adding an ASPxMemo control. Note that style settings and the functionality of regular controls are saved completely.

  ASPX

  <EditForm>
       <div style="padding: 4px">
                 <dx:ASPxGridViewTemplateReplacement ID="TemplateReplacementContent" ReplacementType="EditFormContent" runat="server">
                 </dx:ASPxGridViewTemplateReplacement>
                 <br/>
                 <dx:ASPxMemo ID="ASPxMemo1" runat="server" Height="70px" Width="100%" Text='<%# Eval("Notes")%>'>
                 </dx:ASPxMemo> 
       </div>   
  </EditForm>
  

  The image below shows the result.

  

  Note

  If you don’t add any extra controls to edit a form template with a template replacement of the EditFormContent type, it is recommended that you not use the template at all. Set the ASPxGridViewEditingSettings.Mode property to GridViewEditingMode.EditFormAndDisplayRow (default value) to get the same result.

   

• Template replacement of every edit cell

  To display edit cells for every grid field within an edit form without a regular button (or if you prefer to put them in a custom place), set the ASPxGridViewTemplateReplacement.ReplacementType property to GridViewTemplateReplacementType.EditFormEditors. Note that you cannot use the template replacement of this type with a replacement of the EditFormContent or EditFormCellEditor type.

   

  The code sample below demonstrates how you can add ASPxPageControl to an edit form. Note that style settings and the functionality of regular controls are saved completely. The entire sample is available in the Grid Editing - Edit Form Template of the ASPxGridView demo.

  ASPX

  <EditForm>
  
       ...
  
       <dx:TabPage Text="Info" Visible="true">
            <ContentCollection>
                 <dx:ContentControl runat="server">
                      <dx:ASPxGridViewTemplateReplacement ID="Editors" ReplacementType="EditFormEditors" runat="server">
                      </dx:ASPxGridViewTemplateReplacement>
                 </dx:ContentControl>
            </ContentCollection>
       </dx:TabPage>
  
       ...
  
  </EditForm>
  

  The image below shows the result.

  

  To see samples of usage of this template replacement type, refer to the following Code Central examples: How to set and get a value of an unbound control within the EditForm, How to change the position of the Edit/Cancel buttons in the EditForm, Invoke a popup window using a control from the EditForm template.

   

• An edit cell template replacement

  Set the ASPxGridViewTemplateReplacement.ReplacementType property to GridViewTemplateReplacementType.EditFormCellEditor to add an edit cell displaying the value of a particular data source field to your edit form template. You should specify the data source field via the ASPxGridViewTemplateReplacement.ColumnID property. Note that you cannot use the template replacement of this type with the replacement of EditFormEditors or EditFormContent types.

   

  ASPX

  <EditForm>
       <table align=center cellspacing=10>
            <tr>
                 <td>First Name</td>                            
                 <td>
                      <dx:ASPxGridViewTemplateReplacement ID="TemplateReplacementFirstName" ReplacementType="EditFormCellEditor" ColumnID="FirstName" runat="server">
                      </dx:ASPxGridViewTemplateReplacement>
                 </td>
                 <td>Last Name</td>                                                       
                 <td>
                      <dx:ASPxGridViewTemplateReplacement ID="TemplateReplacementTitleLastName" ReplacementType="EditFormCellEditor" ColumnID="LastName" runat="server">
                      </dx:ASPxGridViewTemplateReplacement>
                 </td>
  
                 ...  
  
            </tr>
       </table>
  </EditForm>
  

  The image below shows the result.

  

   

• Update and Cancel buttons template replacements

  To add regular Upgrade and/or Cancel buttons to your edit form template, set the ASPxGridViewTemplateReplacement.ReplacementType property to GridViewTemplateReplacementType.EditFormUpdateButton and GridViewTemplateReplacementType.EditFormCancelButton respectively. Note that the regular buttons automatically execute upgrading or cancellation of data.

   

  ASPX

  <EditForm>
       <table align=center cellspacing=10>
            <tr>
  
            ...
  
                 <td>
                      <dx:ASPxGridViewTemplateReplacement ID="TemplateReplacementUpdate" ReplacementType="EditFormUpdateButton" runat="server">
                      </dx:ASPxGridViewTemplateReplacement>
                 </td>                
                 <td>
                      <dx:ASPxGridViewTemplateReplacement ID="TemplateReplacementCancel" ReplacementType="EditFormCancelButton" runat="server">
                      </dx:ASPxGridViewTemplateReplacement>               
                 </td>                
            </tr>
       </table>
  </EditForm>
  

  The image below shows the result.

  

  To see samples of usage of these template replacement types, refer to the following Code Central examples: How to set and get a value of an unbound control within the EditForm, How to change the position of the Edit/Cancel buttons in the EditForm, Invoke a popup window using a control from the EditForm template, HtmlEditor in ASPxGridView.

Pager template replacement

Set the ASPxGridViewTemplateReplacement.ReplacementType property to GridViewTemplateReplacementType.Pager to get a pager within your template. Note you can use this type of template replacement within the GridViewTemplates.PagerBar template only.

 

ASPX

<PagerBar>
     <table>
          <tr>
               <td>
                    <dx:ASPxGridViewTemplateReplacement ID="ASPxGridViewTemplatePager" ReplacementType="Pager" runat="server">
                    </dx:ASPxGridViewTemplateReplacement>                             
               </td>

          ...

          </tr>
     </table>
</PagerBar>

To see a sample of usage of this template replacement type, refer to the following Code Central example: How to embed export buttons in the ASPxGridView pager.