New to Telerik UI for WPF? Download free 30-day trial

Calculator Picker

The RadCalculatorPicker control is a drop down button with a RadCalculator in its drop down content. The button content shows the calculated value of the calculator.

Defining RadCalculatorPicker

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

A picture showing WPF RadCalculatorPicker

The drop down state can be controlled manually with the IsDropDownOpen property of RadCalculatorPicker.

Opening the drop down content in code

this.calculatorPicker.IsDropDownOpen = true; 

DataGrid Integration

The following example shows how to utilize the RadColorPicker control as the cell editing element of a RadGridView column. To do so, define a custom CellEditTemplate for the column and in the DataTemplate add the calculator.

Defining a model for the RadGridView rows

public class RowInfo 
{ 
    public string Name { get; set; } 
    public double Value { get; set; } 
} 

Populating the data source

public MainWindow() 
{        
    InitializeComponent(); 
    var source = new ObservableCollection<RowInfo>(); 
    for (int i = 0; i < 10; i++) 
    { 
        source.Add(new RowInfo() { Name = "Item " + i, Value = 5 }); 
    } 
    DataContext = source; 
} 

Defining the RadGridView and setting up the RadCalculatorPicker as the cell edit element

<telerik:RadGridView GroupRenderMode="Flat" 
                     ItemsSource="{Binding}"                          
                     AutoGenerateColumns="False"> 
    <telerik:RadGridView.Columns> 
        <telerik:GridViewDataColumn DataMemberBinding="{Binding Name}"/> 
        <telerik:GridViewDataColumn DataMemberBinding="{Binding Value}"> 
            <telerik:GridViewDataColumn.CellEditTemplate> 
                <DataTemplate> 
                    <telerik:RadCalculatorPicker Value="{Binding Value, Mode=TwoWay}" /> 
                </DataTemplate> 
            </telerik:GridViewDataColumn.CellEditTemplate> 
        </telerik:GridViewDataColumn> 
    </telerik:RadGridView.Columns> 
</telerik:RadGridView> 
Using RadCalculatorPicker as a cell editor of RadGridView

A picture showing WPF RadCalculator as the editor of RadGridView cells

See Also

In this article