This is a migrated thread and some comments may be shown as answers.

keep Combobox popus righ alligned

15 Answers 31 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Ganesh Jagdale
Top achievements
Rank 1
Ganesh Jagdale asked on 07 Jun 2011, 11:52 AM
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

15 Answers, 1 is accepted

Sort by
0
Accepted
Dani
Telerik team
answered on 08 Jun 2011, 12:44 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Ganesh Jagdale
Top achievements
Rank 1
answered on 08 Jun 2011, 01:56 PM
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;

 

0
Dani
Telerik team
answered on 09 Jun 2011, 08:05 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Ganesh Jagdale
Top achievements
Rank 1
answered on 09 Jun 2011, 04:24 PM
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
0
Accepted
Dani
Telerik team
answered on 10 Jun 2011, 08:29 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Ganesh Jagdale
Top achievements
Rank 1
answered on 10 Jun 2011, 09:39 AM
Thanks Dani.
0
Kalli Kaldi
Top achievements
Rank 1
answered on 14 Apr 2014, 11:29 AM
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
0
Masha
Telerik team
answered on 16 Apr 2014, 03:48 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Kalli Kaldi
Top achievements
Rank 1
answered on 22 Apr 2014, 10:21 AM
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
0
Kalli Kaldi
Top achievements
Rank 1
answered on 22 Apr 2014, 10:26 AM
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
0
Kalli Kaldi
Top achievements
Rank 1
answered on 22 Apr 2014, 10:27 AM
Sorry again.  It works in IE, not Chrome.

Kalli
0
Masha
Telerik team
answered on 23 Apr 2014, 06:50 AM
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
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
Kalli Kaldi
Top achievements
Rank 1
answered on 25 Apr 2014, 01:42 PM
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
0
Masha
Telerik team
answered on 28 Apr 2014, 06:58 AM
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
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
Kalli Kaldi
Top achievements
Rank 1
answered on 28 Apr 2014, 01:09 PM
Hi Masha.

You've been very helpful, thank you.

Best regards,
Kalli
Tags
ComboBox
Asked by
Ganesh Jagdale
Top achievements
Rank 1
Answers by
Dani
Telerik team
Ganesh Jagdale
Top achievements
Rank 1
Kalli Kaldi
Top achievements
Rank 1
Masha
Telerik team
Share this question
or