Passing typed and selected values to command for RadRibbonComboBox

[Dipen]

Hi,

I am trying to do the following:

1) User types in a number which isn't in the dropdown and presses enter. I want to pass this number as a command parameter to my command and the value they typed should stay in the text field - even if that number isn't in the dropdown.

2) If a user selects a value already in the dropdown, then that should be passed as a command parameter to my command.

So far I have been unable to do this as the only values that get passed are the ones selected from the dropdown, I have attached my xaml below:

1.<telerik:RadRibbonComboBox CanAutocompleteSelectItems="False" CanKeyboardNavigationSelectItems="False" DropDownClosed="RadComboBox_OnDropDownClosed" IsFilteringEnabled="True" CommandParameter="{Binding Text, RelativeSource={RelativeSource Self}}" IsEditable="True" IsReadOnly="False" MaxDropDownHeight="400" OpenDropDownOnFocus="True" StaysOpenOnEdit="True" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding MyCommand}" Width="65">
2.<telerik:RadRibbonComboBoxItem Content="8"/>
3.<telerik:RadRibbonComboBoxItem Content="9"/>
4.<telerik:RadRibbonComboBoxItem Content="10"/>
5.<telerik:RadRibbonComboBoxItem Content="11"/>
6.</telerik:RadRibbonComboBox>

 

Any help would be much appreciated, thank you.

[Martin Ivanov]

Hello Dipen,

To avoid clearing the entered value if it is not presented in the drop down you can set the IsFilteringEnabled property to False.

About the command, note that the RadRichTextBoxRibbonUI.RichTextCommand attached property works only with RichTextBoxCommands.

If you want to use a custom command you can use the control's Command property. But note that the command assigned to the property will be executed when the selection in the ribbon combobox is changed. To execute your command on Enter key press you will need to implement custom behavior which does that. For example, you can subscribe for the KeyDown event of the combo box and if the pressed key is Enter manually execute your command. You can see this approach demonstrated in the attached project.

Regards,
Martin
Telerik by Progress

[Dipen]

Hi Martin,

Thank you for your reply. I didn't realise the command was important when trying to simplify. The actual command assigned to the RadRichTextBoxRibbonUI.RichTextCommand attached property is the ChangeFontSizeCommand.

The other differences are that currently the CommandParameter is binded to SelectedItem.Tag, where the Tag value (Pixels) on each ComboBoxItem is calculated manually for each based on our DPI and maximum font size.

I think some of the other functionality currently present (i.e. updating of the font size in the text area when performing other operations) is due to using RadRichTextBoxRibbonUI.RichTextCommand. Given this context, how would I add the ability to type in a font size not in the drop down and have it execute the FontSizeCommand or perhaps a command inherited from FontSizeCommand?

Kind regards,

Dipen

 

[Martin Ivanov]

Hello Dipen,

I tested the ChangeFontSizeCommand and it works in the common scenario where you choose a font size from the drop down. Note that in the context of the combobox the RichTextCommand will be executed on valid selection changed (value presented in the dropdown or a deselection). In order to execute the command on enter of invalid values (not presented in the dropdown) you can subscribe for the KeyDown event of the combobox and call the command manually.

this.comboBox.AddHandler(RadRibbonComboBox.KeyDownEvent, new KeyEventHandler(OnComboBoxKeyDown), true);
....
private void OnComboBoxKeyDown(object sender, KeyEventArgs e)
{
    if (e.Key == Key.Enter)
    {
        (this.DataContext as MainViewModel).MyCommand.Execute(this.comboBox.Text);
    }
}

Regards,
Martin
Telerik by Progress

[Dipen]

Hi Martin,

Thanks for all your help so far, I have sort of managed to get this to work now. However I have had problems capturing both the Enter KeyDown and PreviewKeyDown events. The KeyDown event does not fire at all for an Enter, the PreviewKeyDown event is able to capture the Enter key but not cleanly. Interestingly both events have no trouble capturing a Tab press, things work flawlessly with a tab.

For the PreviewKeyDown, an Enter press will cause the RadRichTextBox selection to be cleared, as if you were mereley highlighting and hitting Enter. Through trial and error (focusing some items on the RibbonView such as IncrementFontSize results in that item being executed) I found that focusing on another RibbonView item (UnderlineButton below) after changing the font size somehow addresses this issue.

private void UIElement_OnPreviewKeyDown(object sender, KeyEventArgs e)
       {
           if (e.Key == Key.Enter || e.Key == Key.Tab)
           {
               var text = ((RadRibbonComboBox)sender).Text;
               ViewModel.RichTextCommands.CustomChangeFontSizeCommand.Execute(text);
               UnderlineButton.Focus();
           }
       }

XAML:

<telerik:RadRibbonComboBox CanAutocompleteSelectItems="False"
   CanKeyboardNavigationSelectItems="False"
   IsFilteringEnabled="False"
   IsEditable="True"
   IsReadOnly="False"
   OpenDropDownOnFocus="True"
   StaysOpenOnEdit="True"
   MaxDropDownHeight="400"
   Width="65"
   IsTextSearchEnabled="True"
   telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding CustomChangeFontSizeCommand}"
   CommandParameter="{Binding Text, RelativeSource={RelativeSource Self}}"
   PreviewKeyDown="UIElement_OnPreviewKeyDown"
   DropDownClosed="RadComboBox_OnDropDownClosed" >

I'm not sure if this is relevant but the DropDownClosed event here was used to address a separate issue earlier where it appeared as though the ComboBox was not properly losing focus on occasion (i.e. when clicking onto a RadRichTextBox) which meant the OpenDropDownOnFocus did not work consistently. I'm not sure whether it is the setup I have but I noticed that focusing on another RibbonView item (IncrementFontSize in this case) seemed to cause a proper loss of focus such that the ComboBox DropDown would open on the next focus.

Do you have any thoughts?

Thank you for your help once again,

Dipen

[Martin Ivanov]

Hi Dipen,

Note that the combobox control could handle the KeyDown event in some cases. In this case your event handler won't be called. In order to allow the handler to be called in all cases when a key is pressed, you can use the AddHandler() method with its last parameter set to true as demonstrated in the project from one of my previous replies.

comboBox.AddHandler(RadRibbonComboBox.KeyDownEvent, new KeyEventHandler(comboBox_KeyDown), true);

About clearing the selection, I am not sure what is happening on your side. However, keep in mind that most ribbonview items are not focusable by default and in some cases when you hit Enter the focus could be on the rich text box which could lead to clearing of the selection.

As for losing the focus, I am not sure that I understand your case. The focus is not given to the RadRichTextBox control in somecases when the combo drop down is opened? Is this your case? If so, can you prepare a runnable code snippets along with steps to reproduce this so that I can test it locally? You can also consider to send us a support ticket with a project demonstrating this behavior.

Regards,
Martin
Telerik by Progress