Data Items

  • 4 minutes to read

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

Create 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 populated declaratively, but you can use the DataViewItemCollection.Add method to add data items in code-behind. In this case, a custom data object with the required properties should be assigned to the DataViewItem.DataItem property value.

    View Example

    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"
                };
            }
        }
    

Display Data

The ASPxDataView control organizes and renders its data items according to the selected 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 field in the data source is displayed with the asp:Label control.

...
<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.

Create 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.

...
<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>
...

ASPxDataView DataBound ItemTemplate

Create a Custom Item Template at Runtime

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

View Example

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();
    }