Adding some separator in the list

[Marco]

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

[Paul]

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

[Marco]

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 :-)

[Paul]

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

[Marco]

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

[Paul]

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

[Marco]

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...) !

[Paul]

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

[Marco]

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.

[Paul]

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

[Marco]

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