Edit this page

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 WPF Application project and open it in Visual Studio.

Adding RadCalculatorPicker to the Project

  • Create a new WPF project;

  • Add references to the assemblies Telerik.Windows.Controls and Telerik.Windows.Controls.Input;

  • Add the RadCalculatorPicker as demonstrated below:

<Window x:Class="RadCalculatorPicker.MainWindow"
             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>
</Window>

Two lines of code are important here:

  • The import of the Telerik schema:

  • 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