Morning!
The following example creates a grid, adds a column, and then initializes each cell in the column to a dhtmlxCombo.
The resulting dhtmlxCombo is different than the standard dhtmlxCombo that would appear outside of the grid.
-
Looking at the grid, there’s no way for the user to know that this column represents a range of values that can be selected. No initial dropdown arrow appears in the table.
-
You have to DOUBLE-click to see the options in the select.
Is there any way to configure the select so that…
…you see the dropdown arrow in the table by default.
…a single click allows the user to see the options in the select.
I’m looking to migrate from a solution that is like the latter, and we’d (really) not want to change the user experience.
Thanks for your help.
Will.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Tables</title>
</head>
<link rel="stylesheet" type="text/css" href="../../dhtmlx/dhtmlxGrid/codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="../../dhtmlx/dhtmlxCombo/codebase/dhtmlxcombo.css">
<script src="../../dhtmlx/dhtmlxGrid/codebase/dhtmlxcommon.js"></script>
<script src="../../dhtmlx/dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
<script src="../../dhtmlx/dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>
<script src="../../dhtmlx/dhtmlxGrid/codebase/ext/dhtmlxgrid_mcol.js"></script>
<script src="../../dhtmlx/dhtmlxGrid/codebase/excells/dhtmlxgrid_excell_combo.js"></script>
<script src="../../dhtmlx/dhtmlxCombo/codebase/dhtmlxcombo.js"></script>
<script>
// Core 'data' of the grid.
var gridData = '<?xml version="1.0" encoding="UTF-8"?><rows><row><cell>Alpha</cell></row><row><cell>Bravo</cell></row><row><cell>Charlie</cell></row></rows>';
var mygrid;
function doInitGrid(){
mygrid = new dhtmlXGridObject('mygrid_container');
mygrid.setImagePath("../../dhtmlx/dhtmlxCombo/codebase/imgs/");
mygrid.setHeader("Name");
mygrid.setInitWidths("150");
mygrid.setColAlign("center");
mygrid.setColSorting("str");
mygrid.setColTypes("ro");
mygrid.setSkin("light");
mygrid.init();
mygrid.parse(gridData);
mygrid.insertColumn(0,"Action","combo",150);
mygrid.forEachRow(
function callout(row_id) {
initializeActionCombo(mygrid, row_id);
}
);
}
// Each cell in the 'Action' column's dhtmlxCombo can be initialized independently of each other.
function initializeActionCombo(grid, row_id) {
var combo = grid.cells(row_id,0).getCellCombo();
combo.addOption("1","A");
combo.addOption("2","B");
combo.addOption("3","C");
}
</script>
<body onload="doInitGrid();">
<table>
<tr>
<td valign="top"><div id="mygrid_container" style="width:600px; height:150px;"></div></td>
</tr>
</table>
</body>
</html>