Dhtml Combo takes too much time to load.

The problem is we are populating combo box from database. If the records are too many in number, combo box takes too much time to load the list and page hangs there. We were dealing with around 5000 records. the filtering is also enabled

Hello,


The similar issue was already discussed today. Please, take a look at the answer dhtmlx.com/docs/products/kb/inde … mal&q=9293

hello.

The given link in the reply doesn’t work. Can I get the relocated link please.

regards

dhtmlx.com/docs/products/kb/index.shtml?q=9293

I’ve got a similar problem, the combo takes alot of time to load…
The problem is though, I’m not using php, but Coldfusion with AJAX, so I’m loading the combo from a JSON recordset.

The best way I know of to do this is:

for (var i=0; i<qJSData.ROWCOUNT; i++) {
	jsField.addOption(qJSData.DATA.ID[i],String(NoNull(qJSData.DATA.NAME[i])).replace(/&/g,"&amp;").replace(/'/g, "\'"));
}

And for speeding things up I filter what is added:

var TempText = jsField.getComboText().substring(0,1);

for (var i=0; i<qJSData.ROWCOUNT; i++) {
	if(String(qJSData.DATA[NameCol][i]).substring(0,1).toUpperCase() == TempText.toUpperCase()) {
		jsField.addOption(qJSData.DATA.ID[i],String(NoNull(qJSData.DATA[NameCol][i])).replace(/&/g,"&amp;").replace(/'/g, "\'"));
		}
	}

The above code is placed in a function called LoadCombo.
For completion here’s the part where the combo is created:

<td>
        <select style="width:150px;" id="combo_firm" name="cmbfirm" size="1">
            <option value="-1">all firms</option>
            <cfif isDefined("qFirm")>
                <cfoutput><option value="#qFirm.id#" selected>#charcrop(qFirm.name,24)#</option></cfoutput>
            </cfif>
        </select>
        <script>  
                var ub=dhtmlXComboFromSelect("combo_firm");
                var ubPrevText = '';
                ub.enableFilteringMode(true);
                ub.attachEvent("onOpen",function(){
                    LoadCombo("cmbfirm", ub, qJSFirmData, 0);
                });	
                ub.attachEvent("onKeyPressed",function(){
					if (typeof(Loaded['cmbfirm']) != 'undefined' && ubPrevText.toUpperCase().substring(0,1) != ub.getComboText().toUpperCase().substring(0,1)){
						Loaded['cmbfirm'] = 0; // Setting this will reload the data in the combobox in function LoadCombo
						ubPrevText = ub.getComboText().toUpperCase().substring(0,1);
					}
                    LoadCombo("cmbfirm", ub, qJSFirmData, 0);
                });
				ub.attachEvent("onSelectionChange",function(){ // This is added to get a proper droplist length
					if (ub.DOMlist.scrollHeight > 100) {
						ub.setOptionHeight(124);
					}
					else {
						ub.enableOptionAutoHeight(true);
					}
				});
        </script>
</td>

Actually, here’s the entire LoadCombo function, just to share in what I’ve created

var LoadCombo = function(Fieldname, jsField, qJSData, ShowAll) {
		if(typeof(Loaded[Fieldname]) == 'undefined' || Loaded[Fieldname] == 0){
			var CurVal = jsField.getActualValue();
			var CurText = jsField.getComboText();
			var TempText = CurText;	
			if (ShowAll == 0) {
				if (TempText == ' ' || TempText == ''){
					return;
				}
				TempText = TempText.substring(0,1);
			}
			else {
				TempText = '';
			}

			if(typeof(Loaded[Fieldname]) == 'undefined') {
				Loaded[Fieldname] = 1;
			}
			else {
				Loaded[Fieldname] = 2;
			}
			
			var DefText = jsField.getOption(-1);
			jsField.clearAll(true);
			jsField.addOption(-1,DefText.text);
			
			if (Fieldname.substring(0,7) == 'cmbcert') {
				var NameCol = 'SAP_ID';
			}
			else {
				var NameCol = 'NAME';
			}
			
			if (ShowAll == 0) {
				for (var i=0; i<qJSData.ROWCOUNT; i++) {
					if(String(qJSData.DATA[NameCol][i]).substring(0,1).toUpperCase() == TempText.toUpperCase()) {
						jsField.addOption(qJSData.DATA.ID[i],String(NoNull(qJSData.DATA[NameCol][i])).replace(/&/g,"&amp;").replace(/'/g, "\'"));
					}
				}
			}
			else {
				for (var i=0; i<qJSData.ROWCOUNT; i++) {
					jsField.addOption(qJSData.DATA.ID[i],String(NoNull(qJSData.DATA[NameCol][i])).replace(/&/g,"&amp;").replace(/'/g, "\'"));
				}
			}
			
			jsField.setComboValue(CurVal);
			jsField.setComboText(CurText.replace(/'/g, "\'"));
			if (Loaded[Fieldname] != 2) {
				jsField.attachEvent("onChange",function(){
					if (jsField.getActualValue()==jsField.getComboText()) //non existing option entered
					{
					  frmEmployees.combostatus.value='Reset';
					  switch (Fieldname)
					  {
						case 'cmbplangroup':
							jsField.setComboValue("<cfoutput>#form.cmbplangroup#</cfoutput>");
							break;
						case 'cmbfunctiongroup':
							jsField.setComboValue("<cfoutput>#form.cmbfunctiongroup#</cfoutput>");
							break;
						case 'cmborgbu':
							jsField.setComboValue("<cfoutput>#form.cmborgbu#</cfoutput>");
							break;
						case 'cmborgdep':
							jsField.setComboValue("<cfoutput>#form.cmborgdep#</cfoutput>");
							break;
						case 'cmbcostcentre':
							jsField.setComboValue("<cfoutput>#form.cmbcostcentre#</cfoutput>");
							break;
						case 'cmbcompbuild':
							jsField.setComboValue("<cfoutput>#form.cmbcompbuild#</cfoutput>");
							break;
						case 'cmborgcommander':
							jsField.setComboValue("<cfoutput>#form.cmborgcommander#</cfoutput>");
							break;
						case 'cmbfirm':
							jsField.setComboValue("<cfoutput>#form.cmbfirm#</cfoutput>");
							break;
					  }		  
					}
					else if (frmEmployees.combostatus.value == 'Reset')
					{
					  frmEmployees.combostatus.value='';  
					}
/*					else
					{
						switch (Fieldname)
						{

						}
					} */
				});
			}			
		}
	}

But I’m getting carried away again posting code, back to the question at hand: is there a way to speed things up?

You can try to use

[code]var data = [];
for (var i=0; i<qJSData.ROWCOUNT; i++)
data.push({
value:qJSData.DATA.ID[i],
text:String(NoNull(qJSData.DATA.NAME[i])).replace(/&/g,"&").replace(/’/g, “’”)
});

jsField.addOption(data);[/code]

Wow…
That’s just amazing…
I mean… wow… what speed!

Great job on creating that feature!
Thanks a bundle, wish I’d known about this sooner :X