Template Replacements
- 5 minutes to read
When you create a template, you often need to only extend the base control functionality.
Use the ASPxGridViewTemplateReplacement control to customize the edit form and pager bar with the following basic controls:
- Edit cells
- Update and Cancel buttons
- Pager
The ASPxGridViewTemplateReplacement control allows you to include template replacements in your template while maintaining the grid’s base functionality.
Template replacements are displayed as basic controls within a grid according to style settings defined at the control level (the ASPxGridView.Styles, ASPxGridView.StylesEditors, and ASPxGridView.StylesPager properties). The ASPxGridViewTemplateReplacement.ReplacementType property specifies the controls that are displayed by the ASPxGridViewTemplateReplacement control.
See the following online demo for an example on how to use template replacements:
.
The table below contains a list of the ReplacementType property values that define a template type and controls.
| 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
An edit form template replacement allows you to add controls (edit cells, Update and Cancel buttons, or pager) to an edit form template. Note that the edit cells created by the ASPxGridViewTemplateReplacement control are automatically validated on the client if their validation settings are defined at the column level.
Edit form’s entire content template replacement
Set the ASPxGridViewTemplateReplacement.ReplacementType property to GridViewTemplateReplacementType.EditFormContent to display edit cells for every grid field with Upgrade and Cancel buttons in an edit form. Note that you cannot use a template replacement of this type if the ReplacementType of another object from this template is set to EditFormEditors or EditFormCellEditor.
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.
<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
It is recommended that you use the ASPxGridViewEditingSettings.Mode property set to GridViewEditingMode.EditFormAndDisplayRow instead of the edit form template, unless you add extra controls to it while the replacement type is set to EditFormContent.
Template replacement of every edit cell
Set the ASPxGridViewTemplateReplacement.ReplacementType property to GridViewTemplateReplacementType.EditFormEditors to display edit cells for every grid field within an edit form without Update or Cancel buttons (or if you place buttons in a custom position).
Note that you cannot use a template replacement of this type if the ReplacementType of another object from this template is set to EditFormContent* or **EditFormCellEditor.
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.
[!include[ASPxGridView_TemplateReplacementEditors](~/examples/aspxgridview_templatereplacementeditors2633.md)]
The image below shows the result.
Refer to the following Support Center examples for information on how to use this template replacement type:
- 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 that displays the value of a specific data source field to your edit form template. To specify the data source field, use the ASPxGridViewTemplateReplacement.ColumnID property. Note that you cannot use the template replacement of this type with the replacement of EditFormEditors or EditFormContent types.
<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
Set the ASPxGridViewTemplateReplacement.ReplacementType property to GridViewTemplateReplacementType.EditFormUpdateButton or GridViewTemplateReplacementType.EditFormCancelButton to add the Update or Cancel button to your edit form template, respectively. Note that the Update button updates data and the Cancel button cancels changes and closes the edit form.
<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.
See the following Support Center examples for information on how to use these template replacement types:
- 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 add a pager to the template. Note that you can use this type of template replacement within the GridViewTemplates.PagerBar template only.
<PagerBar>
<table>
<tr>
<td>
<dx:ASPxGridViewTemplateReplacement ID="ASPxGridViewTemplatePager" ReplacementType="Pager" runat="server">
</dx:ASPxGridViewTemplateReplacement>
</td>
...
</tr>
</table>
</PagerBar>
Refer to the following Support Center example for information on how to use this template replacement type: How to embed export buttons in the ASPxGridView pager.