RadCalculatorPicker Getting Started
This tutorial will walk your through the creation of a sample application that contains RadCalculatorPicker and will show you how to:
Use RadCalculatorPicker in your project;
User RadCalculatorPicker as editing element;
For the purpose of this example, you will need to create an empty SilverlightApplication project and open it in Visual Studio.
-
Assembly References
- Adding RadCalculatorPicker to the Project
- Use RadCalculatorPicker as Editing Element
Assembly References
In order to use RadCalculator in your projects, you have to add reference to the following assemblies:
- Telerik.Windows.Controls
- Telerik.Windows.Controls.Input
Adding RadCalculatorPicker to the Project
Create a new Silverlight project;
Add references to the assemblies Telerik.Windows.Controls and Telerik.Windows.Controls.Input;
Add the RadCalculatorPicker as demonstrated in Example 1
Example 1: Defining RadCalculator Picker
<UserControl x:Class="RadCalculatorPicker.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:my="clr-namespace:RadCalculatorPicker"
mc:Ignorable="d" d:DesignHeight="700" d:DesignWidth="700">
<Grid x:Name="LayoutRoot" Background="White" >
<telerik:RadCalculatorPicker Height="30" Width="200" />
</Grid>
</UserControl>
Figure 1: Defining RadCalculatorPicker
Use RadCalculatorPicker as Editing Element
RadCalculatorPicker can be embeded as an editing element. In this case we will define it in a CellEditTemplate for a column in RadGridView. For this example we will create a simple grid and customize one of its columns:
Example 2: Using RadCalculatorPicker as a cell editor of RadGridView
<telerik:RadGridView Name="clubsGrid" CanUserFreezeColumns="False"
ShowGroupPanel="False" RowIndicatorVisibility="Collapsed"
ItemsSource="{Binding Clubs}"
ColumnWidth="*"
AutoGenerateColumns="False">
<telerik:RadGridView.Columns>
<telerik:GridViewDataColumn DataMemberBinding="{Binding Name}"/>
<telerik:GridViewDataColumn DataMemberBinding="{Binding StadiumCapacity}"
Header="Stadium"
DataFormatString="{}{0:N0}">
<telerik:GridViewDataColumn.CellEditTemplate>
<DataTemplate>
<telerik:RadCalculatorPicker Value="{Binding StadiumCapacity,Mode=TwoWay}" />
</DataTemplate>
</telerik:GridViewDataColumn.CellEditTemplate>
</telerik:GridViewDataColumn>
<telerik:GridViewDataColumn DataMemberBinding="{Binding Established}"
Header="Est."
DataFormatString="{}{0:yyyy}"/>
</telerik:RadGridView.Columns>
</telerik:RadGridView>
Once we start editing the column we have customized, we will get the following editor