Setting width of items to go beyond ComboBox

6 posts, 0 answers
  1. Richard
    Richard avatar
    63 posts
    Member since:
    Apr 2008

    Posted 01 Jun 2010 Link to this post

    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!

  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 02 Jun 2010 Link to this post

    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.
  3. Jesse Lawler
    Jesse Lawler avatar
    46 posts
    Member since:
    Apr 2010

    Posted 27 Jul 2010 Link to this post

    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";
    }
  4. Yana
    Admin
    Yana avatar
    4890 posts

    Posted 30 Jul 2010 Link to this post

    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
  5. Jesse Lawler
    Jesse Lawler avatar
    46 posts
    Member since:
    Apr 2010

    Posted 30 Jul 2010 Link to this post

    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

  6. Yana
    Admin
    Yana avatar
    4890 posts

    Posted 06 Aug 2010 Link to this post

    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
Back to Top