This is a migrated thread and some comments may be shown as answers.

Setting width of items to go beyond ComboBox

5 Answers 67 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Richard
Top achievements
Rank 2
Richard asked on 01 Jun 2010, 01:41 PM
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!

5 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 02 Jun 2010, 07:20 AM
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.
0
Jesse Lawler
Top achievements
Rank 1
answered on 27 Jul 2010, 06:36 PM
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";
}
0
Yana
Telerik team
answered on 30 Jul 2010, 03:06 PM
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
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
0
Jesse Lawler
Top achievements
Rank 1
answered on 31 Jul 2010, 04:23 AM
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

0
Yana
Telerik team
answered on 06 Aug 2010, 01:33 PM
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
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
Tags
ComboBox
Asked by
Richard
Top achievements
Rank 2
Answers by
Shinu
Top achievements
Rank 2
Jesse Lawler
Top achievements
Rank 1
Yana
Telerik team
Share this question
or