Data Items

• Mar 13, 2021
• 4 minutes to read

The ASPxDataView control displays its content in data items that are organized depending on the chosen layout mode. Each data item is the DataViewItem object that is stored in the ASPxDataView.Items collection. The DataViewItem.DataItem property provides access to the content displayed by a particular item.

Creating Data Items

• Automatically

  Data items are created automatically when the control is bound to a data source. For each record in the data source, a separate DataViewItem object is created. The DataViewItem.DataItem property is initialized automatically with the corresponding data record values.

• Manually

  The ASPxDataView.Items collection cannot be popularized declaratively, but you can add data items in code-behind using the DataViewItemCollection.Add method. In this case, a custom data object with the required properties should be assigned to the DataViewItem.DataItem property value.

  Note

  A complete sample project is available at https://github.com/DevExpress-Examples/how-to-fill-an-unbound-aspxdataview-control-with-data-items-at-runtime-t358211

  Default.aspx.cs

  using DevExpress.Web;
      const int itemsCount = 10;
      protected void DataView_Load(object sender, System.EventArgs e) {
          AddDataItems(DataView);
          DataView.ItemTemplate = new MyDataViewTemplate();
      }
      void AddDataItems(ASPxDataView dataView) {
          for (int i = 1; i <= itemsCount; i++) {
              dataView.Items.Add().DataItem = new {
                  ID = i,
                  Name = "Name" + i,
                  Description = "Sample description for the item"
              };
          }
      }
  

  Default.aspx.vb

  Imports DevExpress.Web
      Private Const itemsCount As Integer = 10
      Protected Sub DataView_Load(ByVal sender As Object, ByVal e As System.EventArgs)
          AddDataItems(DataView)
          DataView.ItemTemplate = New MyDataViewTemplate()
      End Sub
      Private Sub AddDataItems(ByVal dataView As ASPxDataView)
          For i As Integer = 1 To itemsCount
              dataView.Items.Add().DataItem = New With {Key.ID = i, Key.Name = "Name" & i, Key.Description = "Sample description for the item"}
          Next i
      End Sub
  

Displaying Data

The ASPxDataView control organizes and renders its data items depending on the chosen layout mode. The content of an individual data item is displayed in templates. When you bind the ASPxDataView control to a datasource control at design-time, a simple item template is created. Each data field in the data source is displayed with the asp:Label control.

ASPX

...
<ItemTemplate>
    <b>CategoryID</b>:
    <asp:Label ID="CategoryIDLabel" runat="server" Text='<%# Eval("CategoryID") %>' />
    <br/>
    <b>CategoryName</b>:
    <asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' />
    <br/>
    <b>Description</b>:
    <asp:Label ID="DescriptionLabel" runat="server" Text='<%# Eval("Description") %>' />
    <br/>
</ItemTemplate>
...

If the default template doesn’t serve your purposes, you can create a custom one.

Creating a Custom Item Template in Markup

Use the ItemTemplate markup section to create a custom item template. Populate the template with data-bound controls and use data binding expressions to associate them with the corresponding data fields. Below is an example of a simple item template.

ASPX

...
<ItemTemplate>
    <table>
        <tr>
            <td>
                <dx:ASPxLabel ID="lblName" runat="server" Text='<%# Eval("Name") %>' Font-Bold="true" />
            </td>
            <td>
                <dx:ASPxImage ID="imgCover" runat="server" ImageUrl='<%# Eval("ImageUrl") %>' ShowLoadingImage="true" />
            </td>
        </tr>
        <tr>
            <td>
                <dx:ASPxLabel ID="lblDescription" runat="server" Text='<%# Eval("Description") %>' />
            </td>
        </tr>
    </table>
</ItemTemplate>
...

Creating a Custom Item Template at Runtime

Create an object implementing the ITemplate interface and assign it to the ASPxDataView.ItemTemplate property value.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-bind-the-aspxdataview-control-to-a-data-source-at-runtime-t358210

MyDataViewTemplate.cs

using DevExpress.Web;
using System.Web.UI;
    public void InstantiateIn(Control container) {
        var dataViewContainer = container as DataViewItemTemplateContainer;
        container.Controls.Add(GetFormLayout(dataViewContainer.DataItem));
    }
    ASPxFormLayout GetFormLayout(object dataItem) {
        var formLayout = new ASPxFormLayout();
        formLayout.ID = "FormLayout";
        var layoutGroup = formLayout.Items.Add(new LayoutGroup("Item Info")) as LayoutGroup;
        var layoutItemName = new LayoutItem("Name");
        layoutItemName.Controls.Add(new ASPxLabel() { Text = GetData(dataItem, "Name") });
        var layoutItemDecsription = new LayoutItem("Description");
        layoutItemDecsription.Controls.Add(new ASPxLabel() { Text = GetData(dataItem, "Description") });
        layoutGroup.Items.Add(layoutItemName);
        layoutGroup.Items.Add(layoutItemDecsription);
        return formLayout;
    }
    string GetData(object dataObject, string fieldName) {
        return DataBinder.Eval(dataObject, fieldName).ToString();
    }

MyDataViewTemplate.vb

Imports DevExpress.Web
Imports System.Web.UI
    Public Sub InstantiateIn(ByVal container As Control) Implements ITemplate.InstantiateIn
        Dim dataViewContainer = TryCast(container, DataViewItemTemplateContainer)
        container.Controls.Add(GetFormLayout(dataViewContainer.DataItem))
    End Sub
    Private Function GetFormLayout(ByVal dataItem As Object) As ASPxFormLayout
        Dim formLayout = New ASPxFormLayout()
        formLayout.ID = "FormLayout"
        Dim layoutGroup = TryCast(formLayout.Items.Add(New LayoutGroup("Item Info")), LayoutGroup)
        Dim layoutItemName = New LayoutItem("Name")
        layoutItemName.Controls.Add(New ASPxLabel() With {.Text = GetData(dataItem, "Name")})
        Dim layoutItemDecsription = New LayoutItem("Description")
        layoutItemDecsription.Controls.Add(New ASPxLabel() With {.Text = GetData(dataItem, "Description")})
        layoutGroup.Items.Add(layoutItemName)
        layoutGroup.Items.Add(layoutItemDecsription)
        Return formLayout
    End Function
    Private Function GetData(ByVal dataObject As Object, ByVal fieldName As String) As String
        Return DataBinder.Eval(dataObject, fieldName).ToString()
    End Function