Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Martin Allchin on Jun 15, 2009 03:36
open dhtmlx forum
Combobox in Grid

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
Answer posted by dhxSupport on Jun 15, 2009 04:42
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. 


Answer posted by Martin Allchin on Jun 15, 2009 05:25
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.
Answer posted by dhxSupport on Jun 15, 2009 07:49
"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
Answer posted by Martin Allchin on Jun 15, 2009 08:59
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 :-)
Answer posted by Martin Allchin on Jun 16, 2009 02:28
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:

<option value="uk">England</option>
<option value="fr">France</option>
<option value="gr">Germany</option>
<option value="it">Italy</option>
<option value="es">Spain</option>

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.

Answer posted by Martin Allchin on Jun 16, 2009 03:23
Hi, please check last post, I've posted 2-3 replies :)

I am following this example: http://www.dhtmlx.com/docs/products/dhtmlxGrid/samples/interaction_other_components/pro_combo.html

I am doing the same as the first column but I do not get the same result. Mine does not filter..?
Answer posted by Alex (support) on Jun 16, 2009 03:38

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

Answer posted by Martin Allchin on Jun 16, 2009 04:02

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"?>
<rows>
  <head>
    <column align="left" width="100" sort="str" type="ro" hidden="true">NUMBER</column>
    <column align="left" width="100" sort="str" type="ro">Number</column>
    <column align="left" width="*" sort="str" type="combo" xmlcontent="1" filter="true">Application
        <option value="1">one</option>
        <option value="2">two</option>
        <option value="3">three</option>
        <option value="4">four</option>
        <option value="5">five</option>
        <option value="6">six</option>
        <option value="7">seven</option>
        <option value="8">eight</option>
        <option value="9">nine</option>
        <option value="10">ten</option>
    </column>
    <column align="left" width="220" sort="str" type="coro">Voice
        <option value="1">one</option>
        <option value="2">two</option>
        <option value="3">three</option>
    </column>
    <column align="left" width="80" sort="str" type="coro">Play Legals
      <option value="1">Yes</option>
      <option value="0">No</option>
    </column>
    <column align="right" width="60" sort="int" type="ro" hidden="true">IP Deal</column>
    <column align="left" width="200" sort="str" type="ro" hidden="true">Mapped</column>
  </head>
  ...
</rows>

But I am unable to filter, it simply works as a normal select element?
Answer posted by Martin Allchin on Jun 16, 2009 05:31
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:
...
<row>
  <cell>something_must_go_here</cell>
</row>
...

Does not work:
...
<row>
  <cell></cell>
</row>
...

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?

Answer posted by Alex (support) on Jun 16, 2009 06:23
We have sent you the latest dhtmlxgrid_excell_combo.js by email. The issue doesn't reproduce with it locally.
Answer posted by Martin Allchin on Jun 16, 2009 07:12
Newer files fixes the issue, many thanks!