A newer version of this page is available. Switch to the current version.

Binding to Data

  • 5 minutes to read

The ASPxDataView control displays set of data items organized in different ways depending on the chosen layout mode. To populate the control with the data items, you can bind it to the data source using one of the following approaches.

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.

<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 implementing the IEnumerable interface, such as: ADO.NET datasets, data readers (e.g., SqlDataReader, OleDbDataReader) and most collections.

To bind the data view to the custom data source object, 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.

<dx:ASPxDataView runat="server" ID="DataView" OnLoad="DataView_Load">
    <SettingsTableLayout ColumnCount="2" RowsPerPage="2" />
</dx:ASPxDataView>
  • 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 is raised allowing you to perform any data-binding logic. For example, you can call the ASPxWebControl.DataBind method before assigning any data source to the data view and use the DataBinding event handler to provide 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 the data, the ASPxDataWebControlBase.DataBound is raised notifying 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