Set DropDownWidth via JavaScript

[Sean Severson]

I'm working on some JavaScript to set the width of the dropdown list for a RadComboBox to the widest item in the list.  Is there a client-side DropDownWidth property I can use for this?  I didn't see any and so I was trying to set the width of the div containing the dropdown (I use the clientid of the RadComboBox with "_DropDown").  But using the following isn't setting the width:

var ddl = document.getElementById("MainContent_RadComboBox1_DropDown");
ddl.style.width = maxWidth + 'px';

maxWidth is the width of the longest item in the droplist.

Thanks for the help!

Sean M. Severson

[Princy]

Hello,

I found a good code library which describes how to set dropdown width based on item length. Go through the following link to access code library.
Dynamic Dropdown width

Best of luck.


Thanks,
Princy.

[Sean Severson]

Princy,

I'll take a look at the code, though I started down this path once before but may have the issue of not knowing what font or font size are being applied to the dropdownlist.  This was the main reason for going with Javascript.

With my Javascript solution, I am 90% there, I just need to know how to apply the width to the dropdown list.  Any insight into this?

Sean M. Severson

[Sean Severson]

I have implemented the server-side code from the code library link you sent and it works well, but only part of the time.  One of the requirements is that if the widest element in the list is not as wide as the control, then the width of the dropdown list will be the width of the control.  The RadComboBox whose dropdown list I want to resize does not have a predefined width.  It's width is set to 100% so that whatever column it is placed in, it will fill the width of the column.  This RadComboBox is being used as a filter control for a filter column.

I'm still leaning toward a client-side solution if I can learn how to set the width of the dropdown list via JavaScript.

Any suggestions?

Sean M. Severson

[Sean Severson]

i needed to step away from the problem for a little bit to find the solution.  You can set the dropDownWidth via Javascript with the _dropDownWidth property.

You need the following Javascript...
 

function TextWidth(textToMeasure) {
  var ruler = document.getElementById("ruler");
  ruler.innerHTML = textToMeasure;
  return ruler.offsetWidth;
}

function OnClientDropDownOpening(sender, eventArgs) {
  if (sender.get_items().get_count() == 0) {
    eventArgs.set_cancel(true);
  }
  else {

    var maxWidth = 0;
    var x;
    var curWidth;

    for (x = 0; x < sender.get_items().get_count(); x++) {
      curWidth = TextWidth(sender.get_items().getItem(x).get_text());

    if (curWidth > maxWidth)
      maxWidth = curWidth;
  }

  //get the radcombobox
  var comboControl = document.getElementById(sender.get_id());

  if (maxWidth > comboControl.offsetWidth)
    sender._dropDownWidth = maxWidth;
  }
}

and a control to hold the text you want to measure.  I used a span...

<span id="ruler" style="visibility: hidden; white-space: nowrap;"></span>

I set the OnClientDropDownOpening clientside event to "OnClientDropDownOpening".

Sean M. Severson