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> 

Now if you run the application, you will have RadCalculatorPicker:

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

Figure 2: Using RadCalculatorPicker as a cell editor of RadGridView

See Also

• RadCalculatorPicker Getting Started