keep Combobox popus righ alligned

[Ganesh Jagdale]

Hi Telerik,

I'm trying to create a ComboBox with a non-standard dropdown alignment. Basically, I want the dropdown to be below the ComboBox, but aligned with the right edge of the ComboBox instead of the left edge.

I won't able get any property avaliable in RadComboBox to set such behavior.
Please help me out if telerik have some solution.

Thanks in advance.

Thanks,
Ganesh Jagdale

[Dani]

Hello Ganesh,

You need to edit the template of RadComboBox. Inside, you will find the PopUp visual elements. Adjust the Margin of the containing element according to the Width of the popup itself.

For example, if your popup is 100px wide, you need to compensate that with the margin of the containing element - Margin="0 0 100 0" :

<telerik:Popup CloseOnOutsideClick="True"  HorizontalAlignment="Right" Margin="0 0 100 0"
                IsOpen="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                Owner="{Binding RelativeSource={RelativeSource TemplatedParent}}">
                    <Grid x:Name="PopupRoot" Width="100">
...
</Grid>
</telerik:Popup>

I hope this helps.

Kind regards,
Dani
the Telerik team

[Ganesh Jagdale]

Thanks a lot for your reply.

I found other soultion but in code behind. As ComboBox has FlowDirection property to RightToLeft. It is very usefull except it change column of ToggleButton and SelectedTextBlock. I just again change it's column what previouly they have like as follows . 

 

 

this.FlowDirection = System.Windows.FlowDirection.RightToLeft;

 

 

 

 

if (this.DropDownToggleBorder != null && this.DisabledVisualButtonElement != null)

 

 

{

 

 

 

this.DropDownToggleBorder.SetValue(Grid.ColumnProperty, 0);

 

 

 

 

this.DropDownToggleBorder.SetValue(Grid.ColumnProperty, 0);

 

 

}

 

 

 

if (this.SelectedItemText != null && this.FocusVisualElement != null)

 

 

{

 

 

 

this.SelectedItemText.SetValue(Grid.ColumnProperty, 1);

 

 

 

 

this.FocusVisualElement.SetValue(Grid.ColumnProperty, 1);

 

 

}

 

 

 

if (this.ScrollViewerElement != null)

 

 

 

 

this.ScrollViewerElement.FlowDirection = System.Windows.FlowDirection.LeftToRight;

 

[Dani]

Hi Ganesh,

Indeed, you can take advantage of the FlowDirection property. You can have it both ways. The only consideration for choosing the control template editing one is that it is best if you leave visual elements and layout out of your code-behind or view model.

Regards,
Dani
the Telerik team

[Ganesh Jagdale]

HI Dani,
  You are absolutly right but FlowDirection reflected to  Popups  also which i don't want means Popups want to be allign from ReightToLeft but it's content want to be in LeftToRight fashion. That's why I have chosse the control template editing method.
Please let me know whether it is right way in way of implementaion.   

Thanks,
Ganesh

[Dani]

Hello Ganesh,

Yes, this is the way to go, if you wish your content to be left aligned. The approach is quite simple, just mind the width calculations as explained earlier.

Kind regards,
Dani
the Telerik team

[Ganesh Jagdale]

Thanks Dani.

[Kalli Kaldi]

Hello Dani.

Can you please give a sample project where this is implemented, that is flowdirection of the radcombobox is LeftToRight but the flowdirection of the popup is RightToLeft.

Best regards,
Kristjan

[Masha]

Hi Kalli ,

I've modified the control templates of Editable and NonEditable RadComboBox in order to achieved the described behavior. I've added FlowDirection="RightToLeft" to the Grid element named "PopUp".

The sample project is attached which demonstrates this approach.

Regards,
Masha
Telerik

 

 

[Kalli Kaldi]

Hi Masha and thanks for your response.

However, this is not what I'm looking for.  As you can see in attached picture, the alignement of the popup is "wrong" when the dropdown is wider that the combobox itself.  I need the dropdown to be aligned to the right edge of the combobox.

Pleas advise,
Kalli

[Kalli Kaldi]

Sorry, I seem to be unable to attaché a file.  How's that possible, no error message or anything, just doesn't attach my file :(

Regards,
Kalli

[Kalli Kaldi]

Sorry again.  It works in IE, not Chrome.

Kalli

[Masha]

Hello Kalli,

Sorry for the misunderstanding.

You need to set   <Popup x:Name="PART_Popup"  FlowDirection="RightToLeft"> inside the control template  in order to align to the right edge of RadComboBox. Also you need to set FlowDirection="LeftToRight" to ScrollViewer named PART_ScrollViewer to align RadComboBoxItems left.

I've demonstrated this  approach in the attached project.

I hope this helps.

Regards,
Masha
Telerik

 

 

[Kalli Kaldi]

Hi.

Is there no simpler way of doing this, because modifying the whole control template for the combobox messes with my theme (I'm using the Windows8 theme).

Best regards,
Kalli

[Masha]

Hi Kalli ,

The only way to achieve the describe scenario is modifying the control template of RadComboBox. Since  you used Windows8 theme, it is necessary to modify the control template of Windows8 theme. The below example has used OfficeBlack theme and this is the reason you have problems applying it to your project.

You can find all the styles and templates of the needed controls inside Themes.Implicit folder according to the assembly they are placed in. For RadComboBox go to Telerik.Windows.Controls.Input.xaml file and search for RadComboBoxStyle.

I hope this helps.

Regards,
Masha
Telerik

 

 

[Kalli Kaldi]

Hi Masha.

You've been very helpful, thank you.

Best regards,
Kalli