Adding some separator in the list

11 posts, 2 answers
  1. Marco
    Marco avatar
    87 posts
    Member since:
    Apr 2011

    Posted 24 Jul 2013 Link to this post

    Hello,

    Is there a way to put some separator (like in a menu) in a dropdownlist ?

    I have tried to play with border of the RadListVisualItem but it doesn't look great. Got better result with font customisation :-)

    The purpose of my dropdownlist is to select a filter value in a list with special item (No Filter, and Special value). The dropdownlist has not to be databound in my case (value are based on Enum). Filtering system behind is based on binary mask

    NoFilter
    -----------
    Running Sale Process (Enum value 15)
    Financial Dtp Sale Process (Enum valu 12)
    -----------
    Process Step 1 (Enum value 1)
    Process Step 2 (Enum value 2)
    Process Step 3 (Enum value 4)
    Process Step 4 (Enum value 8)
    -----------
    Closed Sale Process (Enum value 0)

    Thank for your advice
  2. Answer
    Paul
    Admin
    Paul avatar
    60 posts

    Posted 29 Jul 2013 Link to this post

    Hi Marco,

    Thank you for writing.

    We have some options that can help you achieve your need.
    Please consider the following code:
    this.radDropDownList1.VisualListItemFormatting += new Telerik.WinControls.UI.VisualListItemFormattingEventHandler(radDropDownList1_VisualListItemFormatting);
    And here:
    void radDropDownList1_VisualListItemFormatting(object sender, Telerik.WinControls.UI.VisualItemFormattingEventArgs args)
    {
        RadListVisualItem item = args.VisualItem as RadListVisualItem;
        if (item != null)
        {
            if (item.Text == "")
            {
                item.Enabled = false;
                item.ShowHorizontalLine = true;
                item.HorizontalLineWidth = 2;
            }
            else
            {
                item.ResetValue(RadListVisualItem.ShowHorizontalLineProperty, Telerik.WinControls.ValueResetFlags.Local);
                item.ResetValue(RadListVisualItem.HorizontalLineWidthProperty, Telerik.WinControls.ValueResetFlags.Local);
            }
        }
    }
    There will be a horizontal line on the elements which contain no text.
    I have attached a sample project for your reference.

    Hope that helps. Please let us know if we can be of further assistance.

    Regards,
    Paul
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINFORMS.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  3. UI for WinForms is Visual Studio 2017 Ready
  4. Marco
    Marco avatar
    87 posts
    Member since:
    Apr 2011

    Posted 12 Aug 2013 Link to this post

    Hi Paul,

     

    I have tried your solution and it look nice. Thank you for the sample and the code !

    Just two more little question about it:

    1. I'm using the Office2010SilverTheme and the VisualItemSeparator background is getting grey (thanks to the enable = false property I think). I have tried to set the 4 BackColorProperty to white and it only make the VisualItemSeparator grey with white transparency. I should have miss something but I can't find it out! Do you have any ideas? I have post a picture about it.
    2. Is it possible to control the height of your VisualItemSeparator? This one is really about fine tuning :-)
  5. Paul
    Admin
    Paul avatar
    60 posts

    Posted 14 Aug 2013 Link to this post

    Hi Marco,

    Thank you for writing and thank you for the image attached.

    Regarding the grey color: the UseDefaultDisabledPaint property should help you:
    item.UseDefaultDisabledPaint = false;

    Regarding the height of the element the HorizontalLineWidth should suffice:

    item.HorizontalLineWidth = 15;

    I have modified the project a bit and attached it back. Please check it out.

    I have also introduced one more idea, you may use background image instead of horizontal line if you wish. Please check the commented code.

    Hope that helps. Please let us know if we can assist you further.

    Regards,

    Paul
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINFORMS.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  6. Marco
    Marco avatar
    87 posts
    Member since:
    Apr 2011

    Posted 16 Aug 2013 Link to this post

    Hi Paul,

    The UseDefaultDisablePaint property has fixed my color issue. Thank you for the trick.

    Regarding the height of the Element, changing the HorizontalWidthLine is not enough. 

    Let me be a little more precise. This property will change the size (height) of the line but not the size of the Element hosting it. You can test this with your sample project. Just set the HorizontalWidthLine to 50 and it will go over the others elements because the hosting element do not grow.

    I have set the HorizontalWidthLine to 2 and the line look nice. But as the hosting Element does not shrink, my separator looks like having a big upper and bottom margin. So I was looking for something like item.Height to reduce this margin.

    As it isn't a real issue for me. I won't be disapointed if it can't be done.

    Have a nice day
  7. Paul
    Admin
    Paul avatar
    60 posts

    Posted 21 Aug 2013 Link to this post

    Hello Marco,

    Thank you for writing back.

    If you want to set the line height of the element to two pixels you can use the following property:
    this.radDropDownList1.AutoSizeItems = true;

    The thing is that if you set it to higher height it will mess up with the other lines. But in your specific case it should work fine.
    We have discovered this issue because of your report, so I have added 500 points to your Telerik Account.
    You can visit the page and add your vote to it if you wish:
    http://www.telerik.com/support/pits.aspx#/public/winforms/15598

    Hope that helps. Please let us know if we can assist you further.

    Regards,
    Paul
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINFORMS.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  8. Marco
    Marco avatar
    87 posts
    Member since:
    Apr 2011

    Posted 22 Aug 2013 Link to this post

    Hello Paul,

    I'm happy that you found a bug with this story.

    I have already tested the AutoSizeItems property of the DropDownList.

    It works pretty nice with your project, but on mine with the AquaTheme we don't see anymore the separator element whatever the separator size ! I have also some new exception throwing in DropDownList VisualListItemFormatting event when I try to access databound item (don't know why but there is a intermediate level where the data are moving to another place, I have use the text instead for formatting.). I hope that's will not give you more work and 500 points to me.

    So autosize is a nice move, but not in my case :-(.

     As I use this dropdown for setting a filter, I could use a DropDownButton wich have an official separator item (not really the best thing in UI design good pratice but...) !
  9. Paul
    Admin
    Paul avatar
    60 posts

    Posted 26 Aug 2013 Link to this post

    Hello Marco,

    Thank you for writing back.
     
    I have looked into the issues you have reported. So I have set the theme to Aqua and tried the setup, it seems to be ok. I have created a screenshot, please check it out.
    Regarding the data bound items, could you please elaborate a bit. I have created basic data binding and tried to access the items from the specified event, everything seems to work flawlessly. How do you bind your data? What kind of data do you bind to?
    Could you also send me an image of how your drop down looks like so I can see why the separator line disappears?
    In the mean time you can also try with setting an image instead. Check the one I have attached to the modified project. It works fine with the sample project perhaps it will be ok with your project too.

    Please let me know how your project progresses. We will assist as best as we can.

    Regards,
    Paul
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINFORMS.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  10. Marco
    Marco avatar
    87 posts
    Member since:
    Apr 2011

    Posted 26 Aug 2013 Link to this post

    Hi Paul,

    My mistake... I have switch between two application which I'm currently working on for the theme !

    As you can see in my first picture joined in this thread (BackcolorGrey.png), the theme used is "Office2010Silver" and not "Aqua". I appology for this. Should not be to difficult to adapt your test projet (I made the change and it show the issue :-)).

    About the databinding, I will try to reproduce the issue in a sample project and I will send it as a ticket support. I won't forget it, just let me a couple of day to find some time to do it.
  11. Answer
    Paul
    Admin
    Paul avatar
    60 posts

    Posted 28 Aug 2013 Link to this post

    Hello Marco,

    Thank you for the clarification.

    I looked into the theme and it appears that there are few properties set because of the specifics of the theme layout. I have modified the project to reflect these changes (namely the padding and border visibility of the dropdown items) and now it should work well with the theme you are using. I have attached the modified project here for your reference. Please check it out.

    Hope that helps. I will be looking forward to your feedback regarding the data bound items exception.

    Regards,
    Paul
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINFORMS.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  12. Marco
    Marco avatar
    87 posts
    Member since:
    Apr 2011

    Posted 29 Aug 2013 Link to this post

    Hello Paul,

    Wooo your a magic guy with your padding and border trick ! Now it's looking really smart !

    Thank you very much.

    The sample project about the data bound exception is ready to be sent to support. It's coming right away.

    Have a nice day
Back to Top
UI for WinForms is Visual Studio 2017 Ready