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

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

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

Rad Calculator Picker-Integration With Rad Grid View

See Also

In this article
Not finding the help you need? Improve this article