Data Items
- 5 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.
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>
...
Create a Custom Item Template at Runtime
Create an object that implements the ITemplate interface and assign it to the ASPxDataView.ItemTemplate property value.
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();
}
Example: Item background color
This example shows how to change the ASPxDataView’s item background color depending on a value.
<dx:ASPxDataView ID="ASPxDataView1" runat="server" DataSourceID="AccessDataSource1">
<ItemTemplate>
<dx:ASPxPanel ID="Panel1" runat="server" BackColor='<%# GetColor(Container.DataItem) %>' Width="250px" Height="150px">
<Paddings Padding="10px" />
<PanelCollection>
<dx:PanelContent ID="PanelContent1" runat="server">
<b>stor_id</b>:
<asp:Label ID="stor_idLabel" runat="server" Text='<%# Eval("stor_id") %>' />
<br />
<b>ord_num</b>:
<asp:Label ID="ord_numLabel" runat="server" Text='<%# Eval("ord_num") %>' />
<br />
<b>ord_date</b>:
<asp:Label ID="ord_dateLabel" runat="server" Text='<%# Eval("ord_date") %>' />
<br />
<b>qty</b>:
<asp:Label ID="qtyLabel" runat="server" Text='<%# Eval("qty") %>' />
<br />
<b>payterms</b>:
<asp:Label ID="paytermsLabel" runat="server" Text='<%# Eval("payterms") %>' />
<br />
<b>title_id</b>:
<asp:Label ID="title_idLabel" runat="server" Text='<%# Eval("title_id") %>' />
<br />
</dx:PanelContent>
</PanelCollection>
</dx:ASPxPanel>
</ItemTemplate>
<ItemStyle Height="1px" Width="1px">
<Paddings Padding="0px" />
</ItemStyle>
</dx:ASPxDataView>