RadCalculatorPicker

This tutorial will walk your through the creation of a sample application that contains RadCalculatorPicker and will show you how:

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.

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 below:

<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>

Two lines of code are important here:

The import of the Telerik schema:

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"&#13;

The declaration of the RadCalculator control inside the Grid:

<telerik:RadCalculatorPicker Height="30" Width="200" />

Now if you run the application, you have RadCalculatorPicker:

Rad Calculator Picker-Basic

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 as simple grid and customize one of its columns:

<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:

Rad Calculator Picker-Integration With Rad Grid View

RadCalculatorPicker

Adding RadCalculatorPicker to the Project

Use RadCalculatorPicker as editing element

Give article feedback