Binding to Data

  • 5 minutes to read

The ASPxDataView control displays a set of data items organized according to the selected layout mode. To populate the control with the data items, use one of the following techniques to bind it to the data source.

IMPORTANT

If the ASPxDataWebControl.DataSourceID property value is specified, the ASPxDataWebControlBase.DataSource property must be left blank, and vice versa. These two properties should never be set at the same time.

ASPxDataView DataBinding Schema

Binding ASPxDataView to data declaratively

You can bind the ASPxDataView control to a data source control in markup. Set the ASPxDataWebControl.DataSourceID property value to the ID of the target data source control. When you assign a data source to the control at design time, a default item template for displaying data items is automatically created.

In the example below, the data view is bound to the XmlDataSource control. A custom item template is created in the markup to display XML data from the data source.

View Example

<dx:ASPxDataView runat="server" ID="DataView" DataSourceID="DataSource">
    <SettingsTableLayout ColumnCount="2" RowsPerPage="2" />
    <ItemTemplate>
        <table>
            <tr>
                <td>
                    <dx:ASPxLabel ID="LabelText" runat="server" Text='<%# Eval("Text") %>' Font-Bold="true" />
                </td>
                <td>
                    <dx:ASPxImage ID="Image" runat="server" ImageUrl='<%# Eval("ImageUrl") %>' ShowLoadingImage="true" />
                </td>
            </tr>
            <tr>
                <td>
                    <dx:ASPxLabel ID="LabelDescription" runat="server" Text='<%# Eval("Description") %>' />
                </td>
            </tr>
        </table>
    </ItemTemplate>
</dx:ASPxDataView>

<asp:XmlDataSource runat="server" ID="DataSource" DataFile="~/App_Data/Charts.xml"></asp:XmlDataSource>

Binding ASPxDataView to data programmatically

You can bind the ASPxDataView control to any object that implements the IEnumerable interface: ADO.NET datasets, data readers (e.g., SqlDataReader, OleDbDataReader) and most collections.

You can bind the data view to the custom data source object. To do this, assign it as the ASPxDataWebControlBase.DataSource property value and call the ASPxWebControl.DataBind method. In this case, an item template should be created manually. In the example below, the Enumerable.Range method is used to create a custom data source. The item template is created at runtime.

View Example

<dx:ASPxDataView runat="server" ID="DataView" OnLoad="DataView_Load">
    <SettingsTableLayout ColumnCount="2" RowsPerPage="2" />
</dx:ASPxDataView>
using DevExpress.Web;
using System.Collections;
using System.Drawing;
using System.Linq;
using System.Web.UI;

protected void DataView_Load(object sender, System.EventArgs e) {
    DataView.DataSource = GetDataSource();
    DataView.ItemTemplate = new MyDataViewTemplate();
    DataView.DataBind();
}
public IEnumerable GetDataSource() {
    IEnumerable dataSource = Enumerable.Range(1, 10).Select(i => new {
        ID = i,
        Name = "Name" + i,
        Description = "Sample description for the item."
    });
    return dataSource;
}
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();
    }
  • When the ASPxDataView control is bound to the data source (either automatically if the ASPxDataWebControl.DataSourceID property is specified, or manually with the ASPxWebControl.DataBind method), the DataBinding event is raised. This event allows you to implement data binding logic. For example, you can call the ASPxWebControl.DataBind method before assigning a data source to the data view and use the DataBinding event handler to supply data.

    protected void DataView_Load(object sender, System.EventArgs e) {
            DataView.DataBind();
        }
    protected void DataView_DataBinding(object sender, System.EventArgs e) {
            DataView.DataSource = GetDataSource();
        }
    
  • After the ASPxDataView control is bound to data, the ASPxDataWebControlBase.DataBound event is raised, which notifies the control that all data binding logic is completed. You can use the ASPxDataWebControlBase.DataBound event handler to perform any required operation based on the data bound to the control.

    protected void DataView_DataBound(object sender, System.EventArgs e) {
            // Find items whose description contains some sample text and change their back color to red
            foreach (DataViewItem item in DataView.Items) {
                if (DataBinder.Eval(item.DataItem, "Description").ToString().Contains("SampleText"))
                    (item.FindControl("FormLayout") as ASPxFormLayout).BackColor = Color.Red;
            }
        }
    
See Also