Data Binding

• Aug 01, 2019
• 2 minutes to read

Apart from the possibility of creating items and specifying their properties manually, data from a data source can also be used to populate items through the process of binding. The ASPxTrackBar control can be bound to any object that implements the IHierarchicalEnumerable or IHierarchicalDataSource interface (e.g., SiteMapDataSource, XmlDataSource).

A data source can be specified by using either one of these properties of the track bar control:

• ASPxTrackBar.DataSourceID to define a declarative data source;
• ASPxTrackBar.DataSource to programmatically supply a data object.

The ASPxTrackBar control supports two methods used to retrieve data from a specified data source.

• You can manually set the control’s specific data-related properties to data source node attribute names.

  The table below lists data-related properties and the corresponding properties of a TrackBarItem object.

  ASPxTrackBar control data-related properties	Corresponding TrackBarItem object properties
  ASPxTrackBar.ToolTipField	TrackBarItem.ToolTip
  ASPxTrackBar.TextField	TrackBarItem.Text
  ASPxTrackBar.ValueField	TrackBarItem.Value

• ASPxTrackBar has an ability to retrieve data automatically, given that the data source node attributes are named after the property names of a TrackBarItem object.

  TrackBarItem object properties	Corresponding data fields
  TrackBarItem.ToolTip	Tooltip
  TrackBarItem.Text	Text
  TrackBarItem.Value	Value

Whichever way you choose, the APSxTrackBar control automatically creates TrackBarItem objects and retrieves their property values from the corresponding nodes.

Specifying a data source for a track bar at design-time

You can specify a data source for a track bar at design-time. Invoke ASPxTrackBar’s smart tag and select the “Choose Data Source” menu entry. Select “New Data Source…”.

The Data Source Configuration Wizard will start. Select the needed data source type and follow the wizard instructions.

Specifying a data source for a track bar in markup

The code sample below demonstrates how to bind ASPxTrackBar to an Xml data source.

XML

<?xml version="1.0" encoding="utf-8" ?>
<TimeLapse>
  <Day DayOfWeek="Monday" ToolTip="Monday" Text="Mon" />
  <Day DayOfWeek="Tuesday" ToolTip="Tuesday" Text="Tue" />
  <Day DayOfWeek="Wednesday" ToolTip="Wednesday" Text="Wed" />
  <Day DayOfWeek="Thursday" ToolTip="Thursday" Text="Thu" />
  <Day DayOfWeek="Friday" ToolTip="Friday" Text="Fri" />
  <Day DayOfWeek="Saturday" ToolTip="Saturday" Text="Sat" />
  <Day DayOfWeek="Sunday" ToolTip="Sunday" Text="Sun" />
</TimeLapse>

ASPX

<dx:ASPxTrackBar ID="ASPxTrackBar" runat="server" DataSourceID="Week" TextField="Text"
            ToolTipField="ToolTip" ValueField="DayOfWeek" ValueType="System.String" 
            ScalePosition="Both" PositionStart="0" PositionEnd="4" AllowRangeSelection="True" Width="400">
            <ClientSideEvents PositionChanged="OnPositionChanged" Init="OnInit" />
</dx:ASPxTrackBar>

<asp:XmlDataSource ID="Week" DataFile="~/App_Data/Week.xml" XPath="//Day" runat="server" />