Integration with dhtmlxCombo

This functionality is available in the PRO edition only.

Grid supports "combo" excell type that was transformed to dhtmlxCombobox component. "Combo" excell supports all modes of dhtmlxCombo.

There are two ways for combo setting definition:

  • for the whole column;
  • for a certain cell.

Combo loading and representation modes are set by special attributes in XML:

  • xmlcontent - in this case options can be defined directly in grid XML;
  • source - the source of combo XML;
  • editable - boolean, 1 by default;
  • filtering - boolean, 0 by default, enables filtering mode (the same as enableFilteringMode() for combo);
  • auto - boolean, 0 by default, enables autocomplete mode (the same as enableFilteringMode(mode,url) for combo);
  • cache - boolean, an additional parameter for the autocomplete mode; xml suggestions are cached (the same as enableFilteringMode(mode,url,cache));
  • sub - boolean, an additional parameter for the autocomplete mode; enables auto loading of additional suggestions on selecting the last loaded option (the same as enableFilteringMode(mode,url,cache,autoSubLoad).

Setting "combo" Column

Combo can be set in the <column> tag for the whole column:

<column width="150" type="combo" xmlcontent="1"…>TEXT
    <option value="1">one</option> 
    <option value="2">two</option> 
    <option value="3">three</option></column>
<column width="150" type="combo" editable="false" source="data.xml" …>TEXT</column>
<column type="combo" source="complete.php" auto="true" cache="true" sub="true"… >
    TEXT
</column>

Combo value should be set inside of the <cell> tags:

<cell>1</cell>

In case of auto complete, <cell>value^text<cell/> instruction defines the value and the text:

<cell>1^one</cell>

Setting "combo" Cell

A cell's combo is set as the column's one. The difference consists in using the <cell> tag instead of the <column> one. In this case, the xmlcontent attribute is always necessary:

<cell xmlcontent="1" editable="0">1
    <option value="1">one</option> 
    <option value="2">two</option> 
    <option value="3">three</option> 
    ...
</cell> 
<cell xmlcontent="1" source="data.xml" filter="true">1</cell>

In case of autocomplete mode, the text should be set with the text attribute:

<cell xmlcontent="1" source="complete.php" auto="true" cache="true" text="some text">
    4
</cell>

Getting Cell/Column Object

The getCellCombo() method returns dhtmlXCombo cell object:

myCombo = grid.cells(id,index).getCellCombo();

This object allows working with dhtmlxCombo API:

myCombo.addOption(key,text);

The getColumnCombo method returns dhtmlXCombo column object:

myCombo = myGrid.getColumnCombo(column_index);

You can use dhtmlxCombo API with this object as well:

myCombo.enableFilteringMode(true);
myCombo.load("data.xml");

Related sample:  Integration with dhtmlxCombo

Back to top