Setting width of items to go beyond ComboBox

[Richard]

Does anyone know if it's possible to have the width of the items inside the combobox to extend beyond the combobox itself?  I have a series of string values that are pretty long.  I'd like to use a combo in a limited space but when expanded, be able to show the full string descriptions.

Thanks!

[Shinu]

Hello Richard,

You can set the 'DropDownWidth' property of RadComboBox to specify the width of the drop-down list, so that you can see the complete text of the items when drop-down is opened.


-Shinu.

[Jesse Lawler]

What if you want to do this dynamically on the client-side based on whatever the largest width inside the RadComboBox is?

I was thinking that the code below would work... grabbing the div containing the drop-down elements (in this case a RadTreeView object) with .get_dropDownElement()... But if I expand the width of that object, it allows the content to overflow the background of the drop-down.  In other words, the drop-down's white under layer doesn't get any bigger, but the TreeView nodes' text can spill off of it.

So the .get_dropDownElement() function isn't really grabbing the object that I need -- how can I manipulate the width of the entire drop-down element from the client side?

var tree = myComboBox.get_items().getItem(0).findControl(treeViewName);
var treeWidth = tree.get_element().clientWidth;
var dropDownDiv = myComboBox.get_dropDownElement();
if (treeWidth > dropDownDiv.firstChild.style.width) {
    dropDownDiv.firstChild.style.width = treeWidth + "px";
}

[Yana]

Hi Jesse,

You can manipulate the width of the combobox dropdown like this:

combo._animationContainer.style.width = "400px";
combo.get_dropDownElement().style.width = "400px";

but not that this should be done in OnClientDropDownOpened event handler (not OnClientDropDownOpening).  Please try it and let us know how it goes.

Best regards,
Yana
the Telerik team

[Jesse Lawler]

Hi there Yana --

Unfortunately the code below is not solving the problem.  It helped get us closer, but it's not the whole way there.  Please see the attached file so you can see the results I'm now getting...

As you can see in the example, the line combo.get_dropDownElement().style.width = "400px"; is allowing the contents of the dropDownElement to expand wider than they would normally be able to, but the background to the dropDownElement isn't growing at all. Obviously, this looks a little weird. 

That's one issue.

My other issue is in accurately determining the width of my TreeView object.  I had thought I could determine the full width of the displayed tree with the call...

var treeWidth = myTree.get_element().clientWidth;

...but in practice this is just getting me the width of the top node of the tree, not the fully-expanded tree.  I would really appreciate help on both these issues.

Thanks,

Jesse

[Yana]

Hi Jesse,

Please excuse us for the delayed reply.

You cannot get the whole width of the treeview when some of its nodes are collapsed, because actually they're rendered as hidden elements on the page.  The solution is to subscribe to OnClientNodeAnimationEnd event and set a different width to the dropdown when a node is expanded. I've attached a simple page to demonstrate this approach, please download it and give it a try.

Greetings,
Yana
the Telerik team