keep Combobox popus righ alligned

16 posts, 2 answers
  1. Ganesh Jagdale
    Ganesh Jagdale avatar
    69 posts
    Member since:
    Dec 2009

    Posted 07 Jun 2011 Link to this post

    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

  2. Answer
    Dani
    Admin
    Dani avatar
    848 posts

    Posted 08 Jun 2011 Link to this post

    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
  3. DevCraft banner
  4. Ganesh Jagdale
    Ganesh Jagdale avatar
    69 posts
    Member since:
    Dec 2009

    Posted 08 Jun 2011 Link to this post

    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;

     

  5. Dani
    Admin
    Dani avatar
    848 posts

    Posted 09 Jun 2011 Link to this post

    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
  6. Ganesh Jagdale
    Ganesh Jagdale avatar
    69 posts
    Member since:
    Dec 2009

    Posted 09 Jun 2011 Link to this post

    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
  7. Answer
    Dani
    Admin
    Dani avatar
    848 posts

    Posted 10 Jun 2011 Link to this post

    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
  8. Ganesh Jagdale
    Ganesh Jagdale avatar
    69 posts
    Member since:
    Dec 2009

    Posted 10 Jun 2011 Link to this post

    Thanks Dani.
  9. Kalli Kaldi
    Kalli Kaldi avatar
    27 posts
    Member since:
    Oct 2011

    Posted 14 Apr 2014 Link to this post

    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
  10. Masha
    Admin
    Masha avatar
    355 posts

    Posted 16 Apr 2014 Link to this post

    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.

     
  11. Kalli Kaldi
    Kalli Kaldi avatar
    27 posts
    Member since:
    Oct 2011

    Posted 22 Apr 2014 in reply to Masha Link to this post

    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
  12. Kalli Kaldi
    Kalli Kaldi avatar
    27 posts
    Member since:
    Oct 2011

    Posted 22 Apr 2014 Link to this post

    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
  13. Kalli Kaldi
    Kalli Kaldi avatar
    27 posts
    Member since:
    Oct 2011

    Posted 22 Apr 2014 in reply to Kalli Kaldi Link to this post

    Sorry again.  It works in IE, not Chrome.

    Kalli
  14. Masha
    Admin
    Masha avatar
    355 posts

    Posted 23 Apr 2014 Link to this post

    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.
     
  15. Kalli Kaldi
    Kalli Kaldi avatar
    27 posts
    Member since:
    Oct 2011

    Posted 25 Apr 2014 in reply to Masha Link to this post

    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
  16. Masha
    Admin
    Masha avatar
    355 posts

    Posted 28 Apr 2014 Link to this post

    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.
     
  17. Kalli Kaldi
    Kalli Kaldi avatar
    27 posts
    Member since:
    Oct 2011

    Posted 28 Apr 2014 in reply to Masha Link to this post

    Hi Masha.

    You've been very helpful, thank you.

    Best regards,
    Kalli
Back to Top
DevCraft banner