DataBinding
Databinding for the RadDataBar control involves the correlation between the business logic/data, and the visualization of the control.
The DataBinding involves the following three properties:
ItemsSource (a property of RadStackedDataBar and RadStacked100Databar): Gets or sets the data source used to generate the content of the databar control. Elements can be bound to data from a variety of data sources in the form of common language runtime (CLR) objects and XML - see the list of the supported data sources bellow.
Value (a property of RadDataBar): Expects a value which will be used to determine the size of the bar.
ValuePath (a property of RadStackedDataBar and RadStacked100DataBar): Expects the name of the property from the underlying datasource, which will determine the value of each bar in the stack.
You can bind the ItemsSource of RadStackedDataBar and RadStacked100DataBar to any class that implements the IEnumerable interface.
RadDataBar will automatically update its size if the value it is bound to changes. For this to happen the underlying data context must implement the INotifyPropertyChanged interface.
RadStackedDataBar and RadStacked100DataBar also provide full support for change notifications - data sources that implement the INotifyCollectionChanged, and underlying data items that implement INotifyPropertyChanged are properly tracked and automatically reflected by the UI.
You'll see the binding in action below.
Let's create a sample class with four properties - two integers, a collection of integers and a collection of another class.
Example 1: The Product class
public class Product
{
public int Value1 { get; set; }
public int Value2 { get; set; }
public IEnumerable<int> Ints { get; set; }
public IEnumerable<Item> Items { get; set; }
}
public class Item
{
public double Val { get; set; }
public string Name { get; set; }
}
Public Class Product
Public Property Value1() As Integer
Public Property Value2() As Integer
Public Property Ints() As IEnumerable(Of Integer)
Public Property Items() As IEnumerable(Of Item)
End Class
Public Class Item
Public Property Val() As Double
Public Property Name() As String
End Class
The next step is to set values for the properties in our class.
Example 2: Sample data
var items = new List<Item>()
{
new Item{ Val = 9, Name = "nine", },
new Item{ Val = 10, Name = "ten", },
new Item{ Val = 11, Name = "eleven", },
new Item{ Val = 20, Name = "twenty", },
new Item{ Val = 22, Name = "twenty two", },
new Item{ Val = 90, Name = "ninety", },
new Item{ Val = -9, Name = "-nine", },
new Item{ Val = -10, Name = "-ten", },
new Item{ Val = -11, Name = "-eleven", },
new Item{ Val = -20, Name = "-twenty", },
new Item{ Val = -100, Name = "-hundred", },
};
this.DataContext = new Product() { Value1 = 20, Value2 = 30, Ints = new List<int>() {5, 6, 7, 8, 9, }, Items = items };
Dim items = New List(Of Item)() From {
New Item With {.Val = 9, .Name = "nine"},
New Item With {.Val = 10, .Name = "ten"},
New Item With {.Val = 11, .Name = "eleven"},
New Item With {.Val = 20, .Name = "twenty"},
New Item With {.Val = 22, .Name = "twenty two"},
New Item With {.Val = 90, .Name = "ninety"},
New Item With {.Val = -9, .Name = "-nine"},
New Item With {.Val = -10, .Name = "-ten"},
New Item With {.Val = -11, .Name = "-eleven"},
New Item With {.Val = -20, .Name = "-twenty"},
New Item With {.Val = -100, .Name = "-hundred"}}
Dim TempProduct As Product = New Product() With {.Value1 = 20, .Value2 = 30, .Ints = New List(Of Integer)() From {5, 6, 7, 8, 9}, .Items = items}
Me.DataContext = New Product() With {.Value1 = 20, .Value2 = 30, .Ints = New List(Of Integer)() From {5, 6, 7, 8, 9}, .Items
The only thing left to do is to create our databar(s) and bind them using the properties exposed for the purpose (as mentioned in the beginning of the article).
Example 3: Define RadDataBars
<telerik:RadDataBar Height="20" Value="{Binding Value1}" BorderBrush="Gray" BorderThickness="1" Margin="2" />
<telerik:RadDataBar Height="20" Value="{Binding Value2}" BorderBrush="Gray" BorderThickness="1" Margin="2" />
<telerik:RadStackedDataBar Height="20" BorderBrush="Gray" BorderThickness="1" Margin="2" ItemsSource="{Binding Ints}" ShowToolTips="True" />
<telerik:RadStackedDataBar Height="20" BorderBrush="Gray" BorderThickness="1" Margin="2" AxisVisibility="Visible"
ItemsSource="{Binding Items}" ValuePath="Val" ToolTipPath="Name" ShowToolTips="True" Minimum="-100" Maximum="100"/>
Note that RadDataBar doesn't have an ItemsSource property since it is a single bar and needs a single value to work.
On the other hand RadStackedDataBar requires a collection of values - the number of items in the collection determines the number of bars that will be visualized in stack.
When bound to a list of business objects, you should set the name of the property from the business object that will provide the value for the bars. For the purpose RadStackedDataBar and RadStacked100Databar expose the ValuePath property.
When run this code will produce the following result.
Figure 1: The different data bars
