GridViewDataColumn.DataItemTemplate Property

Specifies a template to display the column’s data cells.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v24.1.dll

NuGet Package: DevExpress.Web

Declaration

C#

[DefaultValue(null)]
public virtual ITemplate DataItemTemplate { get; set; }

VB.NET

<DefaultValue(Nothing)>
Public Overridable Property DataItemTemplate As ITemplate

Property Value

Type	Default	Description
ITemplate	null	An object that implements the ITemplate interface.

Remarks

When you specify the DataItemTemplate property, the control creates a template within a container object of the GridViewDataItemTemplateContainer type.

At the control level, use the GridView.Templates.DataItem property to specify a template for all grid data cells.

Run Demo: ASPxGridView - Data Item Template

ASPX

<dx:ASPxGridView ID="grid" runat="server" AutoGenerateColumns="false" ...>
    <Columns>
        <!-- ... -->
        <dx:GridViewDataColumn Caption="Details" ...>
            <DataItemTemplate>
                <a href="javascript:void(0);"
                    onclick="OnMoreInfoClick(this, '<%# Container.KeyValue %>')">More Info...</a>
            </DataItemTemplate>
        </dx:GridViewDataColumn>
    </Columns>
</dx:ASPxGridView>

View Example: How to use ASPxBinaryImage to bind a field that contains image data stored as OLE objects

Batch Edit Mode Specifics

In batch edit mode, ASPxGridView copies only HTML markup of the template and disables its client-side functionality. When a cell switches to edit mode, the grid invokes an in-place editor to modify grid data. When editing ends, the grid displays the entered value in the modified cell.

You can change this behavior in the following ways:

Allow the grid to render the template content after cell editing ends

To enable this behavior, set the AllowRegularDataItemTemplate property to true.

ASPX

<dx:ASPxGridView ID="Grid" runat="server" ...">
    <Columns>
        <dx:GridViewDataTextColumn FieldName="TemplatedColumn" />
            <DataItemTemplate>
                <!-- ... -->
            </DataItemTemplate>
        </dx:GridViewDataColumn>
    </Columns>
    <SettingsEditing Mode="Batch">
        <BatchEditSettings AllowRegularDataItemTemplate="true" />
    </SettingsEditing>
</dx:ASPxGridView>

Disable cell editing

When you disable a cell editing, the grid displays the template content and keeps its client-side functionality. To enable this behavior, use one of the following approaches:

• Set the templated column’s EditFormSettings.Visible property to false.

  ASPX

  <dx:GridViewDataTextColumn FieldName="TemplatedColumn" />
      <DataItemTemplate>
          <!-- ... -->
      </DataItemTemplate>
      <EditFormSettings Visible="False" />
  </dx:GridViewDataColumn>
  

• Disable editing in the BatchEditStartEditing event handler.

  ASPX

  <dx:ASPxGridView ID="Grid" runat="server" ...>
      <!-- ... -->
      <ClientSideEvents BatchEditStartEditing="StartEditing" />
  </dx:ASPxGridView>
  

  JS

  function StartEditing(s, e) {
      if (e.focusedColumn.fieldName === "TemplatedColumn")
          e.cancel = true;
  }
  

Online Examples

View Example: How to access and modify a template control in batch edit mode

View Example: How to use an edit item and data item templates in batch mode

Online Examples

View Example: How to use the WebMethod attribute to update data in particular grid columns

View Example: How to enable or disable command buttons on the client

View Example: How to edit data in the grid with template checkboxes

View Example: How to use template editors to update grid data

View Example: Display an editor in a templated column based on another editor's value

View Example: How to calculate templated column values on the client

View Example: How to display a bar code image in a column

View Example: How to show a popup with an enlarged image on mouse hover

View Example: How to calculate bound and unbound column values on the client

View Example: How to implement the Select All functionality in a row

Related GitHub Examples

The following code snippet (auto-collected from DevExpress Examples) contains a reference to the DataItemTemplate property.

Note

The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.

C#

aspxgridview-dataitemtemplate-runtime/CS/HyperlinkColumn/Default.aspx.cs#L46

GridViewDataTextColumn colItemTemplate = new GridViewDataTextColumn();
colItemTemplate.DataItemTemplate = new MyHyperlinkTemplate(); // Create a template
colItemTemplate.Name = "colItemTemplate";

VB.NET

aspxgridview-dataitemtemplate-runtime/VB/HyperlinkColumn/Default.aspx.vb#L41

Dim colItemTemplate As GridViewDataTextColumn = New GridViewDataTextColumn()
colItemTemplate.DataItemTemplate = New MyHyperlinkTemplate() ' Create a template
colItemTemplate.Name = "colItemTemplate"