Bind Image Slider to a Datasource

• Jul 13, 2021
• 2 minutes to read

The ASPxImageSlider can be populated with item information from a data source specified by either of the following properties.

• ASPxDataWebControlBase.DataSource - to programmatically supply a data object.
• ASPxDataWebControl.DataSourceID - to define a declarative data source.

The ASPxImageSlider supports two methods of retrieving data from a specified data source. Set the control’s data-related properties to data source item attribute names. Set data source item attributes and ImageSliderItem object property names to the same name - to retrieve data automatically.

Use Mapping Properties to Bind to Data

When you bind the ASPxImageSlider control to a data source, the control automatically creates an ImageSliderItem object for every recognized data item. The control obtains individual item characteristics (such as text, name, image path, navigation location, and thumbnail path) from the data fields (item attributes) of the corresponding data items. The ASPxImageSlider control exposes specific data-related properties that allow you to specify the data source fields from which item information should be retrieved. The table below lists these properties and the corresponding properties of the ImageSliderItem object.

ASPxImageSlider control data-related properties	Corresponding ImageSliderItem object properties
ASPxImageSlider.ImageUrlField	ImageSliderItem.ImageUrl
ASPxImageSlider.NameField	ImageSliderItem.Name
ASPxImageSlider.NavigateUrlField	ImageSliderItem.NavigateUrl
ASPxImageSlider.TextField	ImageSliderItem.Text
ASPxImageSlider.ThumbnailUrlField	ImageSliderItem.ThumbnailUrl

Example

ASPX

<dx:ASPxImageSlider ID="ASPxImageSlider1" runat="server" DataSourceID="XmlDataSource1" 
     ImageUrlField="Image" NameField="Id" TextField="Description">
</dx:ASPxImageSlider>

Automatic Data Binding

You can specify the ASPxHierarchicalDataWebControl.DataSourceID or ASPxDataWebControlBase.DataSource property to bind the ASPxImageSlider to data.

The ASPxImageSlider recognizes data items and retrieves item characteristics based on their names (see the table below). However, if you have set the data-related properties of an ASPxImageSlider control (such as ASPxImageSlider.TextField, ASPxImageSlider.ImageUrlField), then the control maps the associated ImageSliderItem object properties as detailed in the previous section: Use Mapping Properties to Bind to Data.

In order to bind to a data source, the ASPxImageSlider control automatically retrieves item characteristics from those data fields whose names correspond to the property names of an ImageSliderItem object. The table below lists the names of the item object properties that you can map during automatic binding, and the matching data field names you should use in the data source for the mapping to work.

Node properties that can be set automatically	Data field names
ImageSliderItem.ImageUrl	ImageUrl
ImageSliderItem.Name	Name
ImageSliderItem.NavigateUrl	NavigateUrl
ImageSliderItem.Text	Text
ImageSliderItem.ThumbnailUrl	ThumbnailUrl