Change ComboItem row height and color

[JustinWong]

Hi:

How can I change the row height for the dropdown items? The default is too spaced out; I'd like to reduce the height.  Also, the defaul background color of a selected row is orange. Kind'a gross.   How can I change that?  Finally, I know for teach column, we can use bestfit() to set it's width.  Is there a way to set the dropdown width so that is will automatically fit according the the columns.  All I see as examples are giving the dropdown width a fixed value (e.g.: = 500). That is dissatisfactory because I have no way of know how wide by individual columns will be - it depends on the subset of data returned.  So, I may have lots of extra whit space sometimes (when the combined column with is less that what I've set for the dropdown width). Other times, I need to horizontal scroll to see all the columns because the dropdown width is not set large enough. Neither situation is desired. . .

Thanks!

[Dobry Zranchev]

Hi JustinWong,

Thank you for writing.
 
Changing of the height of the ComboBoxItem can be done with the following code snippet:
 

((RadComboBoxItem)this.radComboBox1.ComboBoxElement.ListBoxElement.Items[0]).MaxSize = new Size(0,15);

 
This code will change only the height of the first item.
 
If you want to show the horizontal scroll bar in the combo popup, you should change its state by using the following code snippet:
 

this.radComboBox1.ComboBoxElement.ComboPopupForm.ListBox.HorizontalScrollState = ScrollState.AutoHide;

 
Changing the selection color is possible only by changing  the theme. Follow the instructions on how to create a theme for the combo box in the documentation of the VisualStyleBuilder. I am sending you the default theme files. You could load it in the VisualStyleBuilder and change the selection fill of the ListBox control. After that you should apply it on the RadComboBox. I hope this will helps.

If you have additional questions, feel free to ask.

Kind regards,
Dobry Zranchev
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.

[JustinWong]

Hi Dobry:

Thanks for your help!  It's great.

On the issue of the horizontal width, though, I think you are misunderstanding me.  I know how to use the horizontal scrollbar, but that is not the point.  The point is, I want the OVERALL width of the dropdown to have a 'BESTFIT()' option based on the TOTAL WIDTH of all the individual column.  To me, it's really pointless to have BestFit() option for the individual columns within the dropdown, but not to have the same option for the overall width so that on every load, the total width of the dropdown is dynamically calculated based on the sum of the width of the individual columns.

Of course, the trick here is that because bestfit() is used for all the individual columns, the combobox will have to be smart enough to calculate the total with of the entire dropdown area on-the-fly (since the width of the individual column will be unknown until the time it is loaded).  That would be a nice feature to have.

Thanks.

Justin

[Deyan]

Hi JustinWong,

 Thanks for writing back and excuse us for the misunderstanding.

I believe your questions are related to the RadMultiColumnComboBox control.

As my colleague said, you can change the row selection color by modifying the theme in the Visual Style Builder. Currently, as you may have already learned, we are working on converting all our themes to the new theming mechanism we introduces as of Q1 2010. This mechamism is much more effective and allowed us to build an entirely new Visual Style Builder (also available as of Q1 2010) which aims to simplify the process of creating a theme for a RadControl. In the Q1 2010 SP1 release we are going to ship the new versions of the Breeze and Desert themes, as well as a brand new theme based on the Office 2010 styles. You will be able to open and edit these themes in the VSB and thus create a new theme based on an existing one.

Regarding the BestFit question:

This feature is available in the RadMultiColumnComboBox by setting the AutoSizeDropDownToBestFit property to true. In this way, each time you open the drop-down, its width will be caclulated based on the sum of the widths of the GridView's columns.

I hope this is what you are looking for.

Do not hesitate to write back if you have further questions or need assistance.

Sincerely yours,
Deyan
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.

[Robert]

I am having a problem with the dropdown width.  I use AutoSizeDropDownToBestFit = True but and this works fine until I set the datasource on the combo box again. I set the datasource on the DropDownOpening event of the combo when there are no items in the combobox yet.  The purpose of this is to mimick LoadOnDemand. 

The first time I click to fire the dropdown it seems the width is not set to the width defined for the control. (It's too narrow and I get the horizontal scroll) Each time I click AFTER that to fire the drop down the width is fine.

I have tried setting the size but nothing seems to work.

Private Sub PMO_CDERadComboBox_DropDownOpening(ByVal sender As Object, ByVal args As System.ComponentModel.CancelEventArgs) Handles PMO_CDERadComboBox.DropDownOpening
    If PMO_CDERadComboBox.EditorControl.Rows.Count = 0 Then
        PMO_CDERadComboBox.Text = My.Application.ag.AGTranslate(41, "Loading...")
        Application.DoEvents()
        PMO_CDERadComboBox.AutoSizeDropDownToBestFit = True
        'PMO_CDERadComboBox.EditorControl.MasterGridViewTemplate.Columns("Source_Code").Width = 70
        'PMO_CDERadComboBox.EditorControl.MasterGridViewTemplate.Columns("Source_Description").Width = 175
        'PMO_CDERadComboBox.EditorControl.Size = New Size(150, 240)
        PMO_CDERadComboBox.DataSource = AGQueries.GetMultiComboData(My.Application.ag.UserCountry, "SelectSourceCode")
    End If
End Sub

[Peter]

Hi Robert,

Thanks for the provided details.

I could suggest adding the following two lines of code after data binding.

PMO_CDERadComboBox.MultiColumnComboBoxElement.BestFitColumns()
PMO_CDERadComboBox.MultiColumnComboBoxElement.EditorControl.RootElement.UpdateLayout()

I hope this helps. Let me know if you have further queries.

Kind regards,
Peter
the Telerik team

[Robert]

That seems to make it wider but it hides most of the vertical scrollbar. There is just enough room that I can click in the vertical scrollbar.

[Peter]

Hello Robert,

Thanks for writing back.
 
In this case I would like to suggest to try manually adjusting the editor width with the following code:
 

void comboBoxEditorElement_PopupOpening(objectsender, CancelEventArgs e)
{
    RadMultiColumnComboBoxElement editor = (RadMultiColumnComboBoxElement)sender;
    editor.DropDownWidth = 500;
    //editor.DropDownHeight = 500;
}

Please, excuse us for the inconvenience. We have added some Telerik points to your account for the suggestions. Don't hesitate to contact us if you have other questions.

 
Best wishes,
Peter
the Telerik team