Disable Filtering Mode when selecting the combo

Suite and Optimus Suite 5
#1

Hi all,

I have a dhtmlx combo filled with a dynamic XML and a pre-selected value, with Filter mode enabled.

When a user clicks on the dropdown to open, it only shows the selected value (or if there is any similar ones), but I want it to show all the options, so user won’t have to delete the values in the combo to get the all the options.

I found that that is possible by disabling the filter-mode, but I want it to be enabled when user is typing in the combo.

If there was a “OnFocus” event, I could disable the filter mode then and enable it “onKeyPress”. But there is no onFOcus event.

Do you guys have any suggestion on how can I get a solution for this ?

Thanks,
MajiD

#2

Hello,

When a user clicks on the dropdown to open, it only shows the selected value (or if there is any similar ones)

This is correct behaviour for combo in filtering mode.

combo filled with a dynamic XML
want it to show all the options

You should choose which mode needs being used. It is impossible to load options dynamically and show all options at the same time.

If you use filtering and static loading:

combo.enableFilteringMode(true); combo.loadXML(url)
you may try using the approach provide the viewtopic.php?f=4&t=12569 post.

#3

Hi all,

I have a dhtmlx combo filled with a dynamic XML , with Filter mode enabled.

When the user types a key on the combo box, it only shows the selected value (or if there is any similar ones) , which is fine.
I found that if user deletes the typed value and clicks on combo checkbox , dropdown is not showing.
Do you guys have any suggestion on how can I get a solution for this ?
below is my code -

combo=new dhtmlXCombo(“cDiv”,control,120);
combo.autoOptionSize=true;
combo.DOMelem_input.style.color=“red”;
combo.setComboText(“Loading…”);
combo.attachEvent(“onKeyPressed”,function(keyCode){ combo.enableFilteringMode(true); });
combo.loadXML(url, function(){onXmlLoad(combo);});

#4

Hi,

I found that if user deletes the typed value and clicks on combo checkbox , dropdown is not showing.

locally this behavior isn’t reproduced:

dhtmlx.com/docs/products/dhtmlxC … ilter.html

#5

Hi ,

Thanks fo rth ereply… You mean this behavior(loading the xml dynamically) is not possible with dhtmlxCombo?

#6

Hi,

You mean this behavior(loading the xml dynamically) is not possible with dhtmlxCombo?

There is dynamic filtering mode. Options in the last two combos are loaded dynamically in the sample
dhtmlx.com/docs/products/dhtmlxC … ilter.html

#7

Hi,

if i enter some value like a then i am seeing the records starts with a in dropdown. which is fine .

I would like to see the whole list dropdown when i click on the combo checkbox with out entering any value. where as - Options in the last two combos are loaded dynamically in the sample but doesn’t open dropdown when i click on the check box . Please give me the solution for this. How to get the dropdown with full list when i don’t enter any value and click on combo check box. THanks for your help.

#8

Hi,

If you want to open the option list when the checkbox in the combo header clicked, you may call use the following:

combo.DOMelem_checkbox.onclick = function(){}

combo is combo object here

#9

Hi,

I have tried the below code for combobox in search form and its working fine. But if want to implement the similar functionality in comboboxes in the grids how should i do? Please see the combo box code in grid after the comboHandler function starting from function initCombos()

function comboHandler(){
var control=“cp”;
var selectedInterval = intervalCombo.getActualValue();
var url = appContext+servletContext+questionMark+area+"&interval="+selectedInterval+"&control="+control;

    if(selectedCategory == "F" && document.getElementById("comboDiv").innerHTML == ""){
		aCombo=new dhtmlXCombo("comboDiv",control,120);
		aCombo.autoOptionSize=true;
         aCombo.DOMelem_input.style.color="red";
      	aCombo.setComboText("Loading...");
		aCombo.loadXML(url, function(){onXmlLoad(aCombo)});
	aCombo.attachEvent("onClick",function(){ 
    	aCombo._last=(new Date()).valueOf(); 
    }) 
    
    aCombo.attachEvent("onKeyPressed",function(keyCode){ 
    	aCombo.enableFilteringMode(true);  
  	  }) 
    aCombo.attachEvent("onOpen",function(){ 
      window.setTimeout(function(){ 
             if ((new Date()).valueOf()-(aCombo._last||0) > 100) return; 
             var text = aCombo.getComboText(); 
             aCombo.setComboText("") 
             aCombo.filterSelf(); 
             aCombo.setComboText(text); 
         },1); 
    }) 
        
    }
}

function initCombos() {
var area=“client”;
b.setArea(area);

		var z = setUpDhtmlXCombo(area, "bnk_br_id_c", 202);
		z.readonly(false);	
		z.required(true);
		z.enableDynamicLoad(true, b.getURL("branch"));

}

function setUpDhtmlXCombo(formId, colId, tabIndex) {
var divId = “combo” + “" + formId + "” + colId;
var comboId = formId + “_” + colId;
var width = 80;
var z = getDhtmlXComboInstance(divId, colId, width, tabIndex);
dhtmlXCombo_set[comboId] = z;
return z;
}

	function getDhtmlXComboInstance(divId, colId, width, tabIndex) {
		var z = new dhtmlXCombo(divId, colId, width, '', tabIndex);
		z.setAutoOptionSize(true);
		z.DOMelem_hidden_input.className = "fmtCombo";
		z.DOMelem_hidden_input.id = colId;
		z.DOMelem_input.combo = z;
		z._skipOnChange = false;	 // allow processing of onChange event
		z.attachEvent("onChange", function() { 
			if (!this._skipOnChange) {
				doOnElementChange(this.DOMelem_hidden_input);
			} else {
				this._skipOnChange = false;} 
			}
		);
		return z;
	}


	function ComboServiceUrlBuilder(appContext, servletContext) {
		this._appContext = appContext;
		this._servletContext = servletContext;
		this._area;
		this.setArea = function (area) { this._area = area + "Details"; };
		this.getURL = function (control ) { return this._appContext + this._servletContext + "?area=" + this._area + "&control=" + control; };
	}


	dhtmlXCombo.prototype.enableDynamicLoad = function (mode, url) {
		this._dynamicLoad = mode;
		this._dynamicLoadURL = url;
		this._loaded = false;

		this.DOMelem.onclick = this._toggleSelectD;

		this.DOMmsg = document.createElement("DIV");
	    this.DOMmsg.className = 'dhx_combo_list';
        this.DOMmsg.style.width=80-(_isIE?0:0)+"px";
		if (_isOpera || _isKHTML ) 
				this.DOMmsg.style.overflow="auto";      
        this.DOMmsg.style.display = "none";
		this.DOMmsg.style.paddingLeft = "5px";
		this.DOMmsg.style.paddingTop = "5px";
		this.DOMmsg.innerHTML = "<font color=red>Loading ...</font>";
	    document.body.insertBefore(this.DOMmsg,document.body.firstChild);         		 
	}

   dhtmlXCombo.prototype._toggleSelectD = function(e)   {
      var that=this.combo;
	  if ( that.DOMlist.style.display == "block" ) {
      that.closeAll();
	  } else {
		 if (that._dynamicLoad && ! that._loaded) {  
			that._positMessage();
			that.DOMmsg.style.display="block";
			setTimeout(function() { that.loadXMLD(that._dynamicLoadURL) }, 100); 
			(e||event).cancelBubble = true;
			return;
		 }
	     that.openSelect();
      }
	  (e||event).cancelBubble = true;
   }

	dhtmlXCombo.prototype.loadXMLD = function(url){
		var currentValue=this.getActualValue();
		var xml=(new dtmlXMLLoaderObject(this._fillFromXML,this,false,true));
	    xml.loadXML(url);
		dt_combo=this;
		setTimeout(function() { dt_combo.onLoadComplete(currentValue) }, 100); 
	}