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"&#13;             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&#13;             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"&#13;             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"&#13;             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"&#13;             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