aspnet-115725-components-data-and-image-navigation-dataview-concepts-data-items.md
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.
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.
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"
};
}
}
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
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") %>' />
<b>CategoryName</b>:
<asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' />
<b>Description</b>:
<asp:Label ID="DescriptionLabel" runat="server" Text='<%# Eval("Description") %>' />
</ItemTemplate>
...
If the default template doesn’t serve your purposes, you can create a custom one.
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 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();
}
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
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") %>' />
<b>ord_num</b>:
<asp:Label ID="ord_numLabel" runat="server" Text='<%# Eval("ord_num") %>' />
<b>ord_date</b>:
<asp:Label ID="ord_dateLabel" runat="server" Text='<%# Eval("ord_date") %>' />
<b>qty</b>:
<asp:Label ID="qtyLabel" runat="server" Text='<%# Eval("qty") %>' />
<b>payterms</b>:
<asp:Label ID="paytermsLabel" runat="server" Text='<%# Eval("payterms") %>' />
<b>title_id</b>:
<asp:Label ID="title_idLabel" runat="server" Text='<%# Eval("title_id") %>' />
</dx:PanelContent>
</PanelCollection>
</dx:ASPxPanel>
</ItemTemplate>
<ItemStyle Height="1px" Width="1px">
<Paddings Padding="0px" />
</ItemStyle>
</dx:ASPxDataView>
public Color GetColor(object dataItem) {
DataRowView row = dataItem as DataRowView;
if(row != null) {
short qty = (short)row["qty"];
return (qty > 20) ? Color.Yellow : Color.Empty;
}
return Color.Empty;
}
Public Function GetColor(ByVal dataItem As Object) As Color
Dim row As DataRowView = TryCast(dataItem, DataRowView)
If row IsNot Nothing Then
Dim qty As Short = CShort(Math.Truncate(row("qty")))
Return If(qty > 20, Color.Yellow, Color.Empty)
End If
Return Color.Empty
End Function