Formating the CalculatorDropDown

[Hardy]

Hi,

 

I like to assign a FormatString to the CalculatorDropDown like Columns.FormatString in GridView-Control.

Example: A value 2.17 should be formated 2.17 m² to display the value in squaremeters.

Is there any property to set or any other solution to format the value in the Calculator-Control?

 

Regards

Hardy

[Dess | Tech Support Engineer, Principal]

Hello Hardy,

Thank you for writing.

RadCalculatorEditorContentElement is a derivative of the RadTextBoxElement which hosts the standard MS TextBox. It does not offer formatting out of the box. Additionally, the RadCalculatorDropDownElement.Value property accepts decimal values. Hence, in order to force some custom format to the calculator, you can use a RadMaskedEditBox and add the arrow button that shows the calculator popup. Here is a sample implementation:

RadCalculatorDropDownElement calculatorElement = new RadCalculatorDropDownElement();

public Form1()
{
    InitializeComponent();

    this.radMaskedEditBox1.MaskType = MaskType.Numeric;
    this.radMaskedEditBox1.Mask = "C";
    CultureInfo culture = System.Threading.Thread.CurrentThread.CurrentCulture.Clone() as CultureInfo;
    culture.NumberFormat.CurrencyPositivePattern = 1;
    culture.NumberFormat.CurrencyNegativePattern = 5;
    culture.NumberFormat.CurrencySymbol = "m²";
    this.radMaskedEditBox1.Culture = culture;
    calculatorElement.PopupClosed += calculatorElement_PopupClosed;
    calculatorElement.BorderPrimitive.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
    calculatorElement.EditorContentElement.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
    StackLayoutElement stackPanel = new StackLayoutElement();
    stackPanel.Orientation = Orientation.Horizontal;
    stackPanel.Margin = new Padding(1, 0, 1, 0);
    stackPanel.Children.Add(calculatorElement);
    RadTextBoxItem tbItem = this.radMaskedEditBox1.MaskedEditBoxElement.TextBoxItem;
    this.radMaskedEditBox1.MaskedEditBoxElement.Children.Remove(tbItem);

    DockLayoutPanel dockPanel = new DockLayoutPanel();
    dockPanel.Children.Add(stackPanel);
    dockPanel.Children.Add(tbItem);
    DockLayoutPanel.SetDock(tbItem, Telerik.WinControls.Layouts.Dock.Left);
    DockLayoutPanel.SetDock(stackPanel, Telerik.WinControls.Layouts.Dock.Right);
    this.radMaskedEditBox1.MaskedEditBoxElement.Children.Add(dockPanel);
}

private void calculatorElement_PopupClosed(object sender, RadPopupClosedEventArgs args)
{
    this.radMaskedEditBox1.Value = calculatorElement.Value;
}

Note that this is just a sample approach and it may not cover all possible cases. Feel free to modify it on a way which suits your requirement best.

I hope this information helps. Should you have further questions, I would be glad to help.

 

Regards,
Dess
Telerik

[Hardy]

Dess,

that's a good idea.

I will embed your snippet into an usercontrol.

 

Thanks a lot

Hardy

[Marc]

Is it possible to make it look like the right one in my picture?

[Dess | Tech Support Engineer, Principal]

Hello, Marc,    

You can eliminate the spacing by adjusting the margin/padding as follows:

this.radMaskedEditBox1.MaskedEditBoxElement.Padding = new Padding(0);
calculatorElement.MemoryElement.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
this.calculatorElement.ArrowButton.Margin = new Padding(0, 0, -1, 0);

I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

[Marc]

Hey Dess,

very nice, thank you :-)