Combobox in Grid

Suite and Optimus Suite 5
#1

Hi,



I am having trouble using a combobox in a grid. I am using excell type ‘combo’ but it says “Incorrect cell type: combo”.



Do I need to create a combobox object and attach it to the grid myself, or do I simply need to set type COMBO as the excell editor and the grid creates a combobox for me? Both CO and CORO work.



I would like a select box with the ability to filter options when text is entered into it. For instance, if I type ‘aaa’ into the select box I would like too show only options with ‘aaa’ in them.



Thanks,



Martin

#2

To use “combo” eXcell type you have to include file excells/dhtmlxgrid_excell_combo.js from the dhtmlxGrid package and
dhtmlxCombo/codebase/dhtmlxcombo.css
htmlxCombo/codebase/dhtmlxcombo.js
from the dhtmlxCombo package.


#3

Thanks, although I am using the all-in-one file from the Enterprise edition so I should not need include extra files…?

I have tried the latest Enterprise edition too (2.1) and I get the same problem.

#4

“Incorrect cell type: combo” error may occur if you not include correct file to your page. Please check if compiled files contain all scripts from the dhtmlxGrid and dhtmlxCalendar packages. If issue still occurs please provide us example where we can reproduce this issue. You can send such example directly to the support@dhtmlx.com

#5

Thank you, including those files now lets me choose ‘combo’ as a valid excell editor.

Unfortunately the options aren’t showing, I’ll fix that tomorrow :slight_smile:

#6

Thank you for the suggestion to include files – I can now use combo as a valid excell type.

Could you please help me configure it though, I can’t seem to get what I want althought I am following the documentation – I would like to be able to type into the combobox and as I type the options filter showing only matches. Matches ought to be anywhere in the string, for instance if I have these options:

England
France
Germany
Italy
Spain

If I type ‘an’ into the combobox it should filter the options so only England, France and Germany show as they have ‘an’ in them.

Also, a user should only be able to select valid options from the list. They should for instance not be allowed to type in ‘Austria’ and continue, as Austria is not in the list.

Thank you for your help.

#7

Hi, please check last post, I’ve posted 2-3 replies :slight_smile:

I am following this example: dhtmlx.com/docs/products/dht … combo.html

I am doing the same as the first column but I do not get the same result. Mine does not filter…?

#8


Hello,


>> If I type ‘an’ into the combobox it should filter the options so only England, France and Germany show as they have ‘an’ in them.


This functionality can be achieved by dhtmlxcombo.js modification:


try to locate the following line:
try{ var filter=new RegExp("^"+text,“i”); }

and replace it with
try{ var filter=new RegExp(text,“i”); }



>> Also, a user should only be able to select valid options from the list. They should for instance not be allowed to type in ‘Austria’ and continue, as Austria is not in the list.


Something as follows can be used:


…
mygrid.loadXML(“combo.xml”,function(){
var combo = mygrid.getColumnCombo(COLUMN_INDEX);
combo.attachEvent(“onChange”,function(){
if(!combo.getOptionByLabel(combo.getComboText())){
combo.setComboValue(val);
}
else val = combo.getActualValue()
})
});




>> I am doing the same as the first column but I do not get the same result. Mine does not filter…?


Please, check that you have set filter=“true” attribute for the column tag

#9


and replace it with  
  try{ var filter=new RegExp(text,“i”); }

Excellent, thank you, I see you’re modifying the regular expression, good idea.


mygrid.loadXML(“combo.xml”,function(){
var combo = mygrid.getColumnCombo(COLUMN_INDEX);
combo.attachEvent(“onChange”,function(){
 if(!combo.getOptionByLabel(combo.getComboText())){
  combo.setComboValue(val);
 }
 else val = combo.getActualValue()
})
});

Excellent, thanks, I will try that!


Please, check that you have set filter=“true” attribute for the column tag

I do indeed, here is the javascript to initialise the grid:

  ajaxExt_NumMapGrid = ajaxExt_NumMapLayout.cells(‘b’).attachGrid();
  ajaxExt_NumMapGrid.setImagePath(’/3rdparty/dhtmlx/imgs/’);
  ajaxExt_NumMapGrid.enableMultiselect(false);
  ajaxExt_NumMapGrid.setSkin(‘light’);
  ajaxExt_NumMapGrid.preventIECaching(true);
  ajaxExt_NumMapGrid.init();
  var url=‘applicationOptions.xml’;
  ajaxExt_NumMapGrid.loadXML(url);

And here is the source of applicationOptions.xml:

<?xml version="1.0" encoding="iso-8859-1"?>

 
    NUMBER
    Number
    Application
        one
        two
        three
        four
        five
        six
        seven
        eight
        nine
        ten
   
    Voice
        one

        two

        three
   
    Play Legals
      Yes
      No
   
    IP Deal
    Mapped
 
  …


But I am unable to filter, it simply works as a normal select element?

#10

Hi, please read the post before this one too…

Regarding the last point where I could not get filtering working – I fixed it, the problem is the filtering does not work on the combobox unless a default value is selected:

Works:
…

  something_must_go_here

…

Does not work:

…



 



…

This poses a problem as I do not want any defaults selected and I want to force the user to choose an option from the drop-down list.

How can I fix this please?

#11

We have sent you the latest dhtmlxgrid_excell_combo.js by email. The issue doesn’t reproduce with it locally.

#12

Newer files fixes the issue, many thanks!