I am using DHTMLX combo box. One of the lists has about 100 items. By default the page shows all the items when the dropdown image is clicked. If there are 100 items in combo box, we sell the list of 100 items. How to set the size of the list, so that only first 5 items are shown when selected. I used enableOptionAutoHeight(false) property, but it doesn’t limit the display of the list. Here is what I did.
Tested enableOptionAutoHeight method with both true and false options. No change.
Used enableOptionAutoHeight method before loading the combo box and after loading the combo. No change.
Checked the css file of dhtmlcombo. The .dhx_combo_list class has height set to 100px;
When I debug javascript I see z.DOMlist.style.height as 100 px.
How to test?
Please check this website I found on internet. 3d-plastic.eu/js/dhtmlxCombo/sam … _size.html
When initally displayed, the enable and disable of Auto height work fine. No change height to 100, click on height, and click on enable. You see all the items in the list. When clicked on disable, you see all the items. Enable /disable doesn’t have any difference.
Following is my script. ename is the selectbox name,k dispvals is string array of list of values, dispval is the default value.
function BuildComboBox(ename, dispvals, dispval) {
var einCombo;
try { einCombo = dhtmlXComboFromSelect(ename); } catch (err) { return }
if (einCombo == null) return;
einCombo.enableOptionAutoWidth(false);
einCombo.clearAll(true);
var xmlstr =’’;
for (i = 0; i < dispvals.length; i++) {
if (dispvals[i] != ‘’) {
// einCombo.addOption(dispvals[i], dispvals[i]);
xmlstr += ‘’ + dispvals[i] + ‘’;
}
}
xmlstr += ‘’;
einCombo.loadXMLString(xmlstr);
einCombo.setComboText(dispval);
einCombo.disable(‘false’);
einCombo.attachEvent(“onChange”, function(event) {
var seltext = this.getActualValue();
FieldValueChanged(this.enumname, seltext); //custom javascript function
});
einCombo.attachEvent(“onClick”, function() {
var seltext = this.getActualValue();
if ((seltext == ‘Enter Specified Amount’) || (seltext == ‘Specify Amount’))
this.setComboText(’’);
});
return einCombo;
}
Please help me. Thanks,
Niranjan Avadhuta.
Hello,
The issue is caused by setting new height = 200px before calling enableOptionAutoHeight(1);. So, when you disable auto height, the height is changed to 200px.
You can use the following approach to set 100px height:
combo.enableOptionAutoHeight(0);
combo.setOptionHeight(100);
Or you can set default height manually: combo._listHeightConf = 100;
I tried setting both setOptionHeight along with enableOptionAutoHeight(0) and _listHeigthConf. The entire list shows up in any case. I want to limit the list with five items with vertical scroll bar. Please take a look at javascript function BuildComboBox I sent earlier. I added method setOptionHeight to it before attachEvent. It doesn’t control the list. Is there anything missing?
Please, have a look at the attached sample.
Locally it works correctly.
The code snippet, which you have provided, doesn’t contain enableOptionAutoHeight and setOptionHeight calls.
combo_height.zip (19.2 KB)