Start Building Professional
Web Apps Today

dhtlmxCombo in Gridcell

Hi, after the perfect implementation of the dhtmlxCombobox on my site (thanx for that!), I came across an opportunity to try the Grid function next.

Unfortunately I'm having some difficulty understanding some functions/options, so I hope you can help me again.

First of, I'm trying to implement the dhtlmxCombobox in a column (or actually multiple columns) with the use of filtering.
Since I'm using Coldfusion (and my XML knowledge is slim-to-none) I was going for the 'convert an HTML table to Grid' option, as follows:

<table id="datagrid" border="1">
<tr>
<td width="20">Id</td>
<td width="200">fk_company_id</td>
<td width="200">fk_employee_id</td>
<td width="200">employeename</td>
<td width="200">fk_function_id</td>
<td width="200">functionname</td>
<td width="200">fk_firm_id</td>
<td width="200">firmname</td>
<td width="200">from_fk_project_id</td>
<td width="200">from_projectcode</td>
<td width="200">from_dateend</td>
<td width="200">to_fk_project_id</td>
<td width="200">to_projectcode</td>
<td width="200">to_datestart</td>
<td width="200">to_dateend</td>
<td width="200">remarks</td>
<td width="200">informed</td>
<td width="200">requeststatus</td>
</tr>
<cfoutput query="qPlanningRequests">
<tr>
<td>#id#</td><td>#fk_company_id#</td>
<td><select style='width:180px;' id="combo_employee" name="cmbemployee" size="1">
            <option value="-1"> </option>
<cfloop query="qEmployeesInfo">
<option value="#ucase(qEmployeesInfo.id)#" <cfif qPlanningRequests.fk_employee_id EQ qEmployeesInfo.id>selected</cfif>>#NiceCharCrop(lastname & ', ' & initials,40)#</option>
<cfif form.cmbemployee EQ id><cfset form.employeename = lastname & ', ' & initials></cfif>
</cfloop>
</select>
</td>

<td>#employeename#</td><td>#fk_function_id#</td><td>#functionname#</td><td>#fk_firm_id#</td><td>#firmname#</td>
<td>#from_fk_project_id#</td><td>#from_projectcode#</td><td>#from_dateend#</td><td>#to_fk_project_id#</td><td>#to_projectcode#</td><td>#to_datestart#</td><td>#to_dateend#</td>
<td>#remarks#</td><td>#informed#</td><td>#requeststatus#</td>
</tr>
</cfoutput>
</table>

<script>
var mygrid = new dhtmlXGridFromTable('datagrid');
mygrid.setImagePath("<cfoutput>#application.stApplicationData.sJs#</cfoutput>dhtmlxGrid/imgs/")>
mygrid.setSkin("light")
mygrid.setColTypes("ed,ed,co,ed,ed,ed,ed,ed,ed,ed,ed,ed,ed,ed,ed,ed,ed,ed");

//combo = mygrid.cells(3,3).getCellCombo();
//combo = mygrid.cells("datagrid",3).getCellCombo();
//combo.enableFilteringMode(true)

</script>

I don't have a clue on how to make the third column an dhtmlcombobox...

The second question is probably easier:
Is it possible to use 'hidden' columns? (still using the convert option)

The third question, will I be able to read all the data from the cells and save them to the database? Since I'm not using an XML-file...

Cheers,
Chris

>>First of, I'm trying to implement the dhtlmxCombobox in a column
Next code need to be updated
<table id="datagrid" border="1"> 
as
<table id="datagrid" border="1" onbeforeinit="set_combo()"> 

next one
<td><select style='width:180px;' id="combo_employee" name="cmbemployee" size="1"> 
  <option value="-1"> </option> 
<cfloop query="qEmployeesInfo"> 
<option value="#ucase(qEmployeesInfo.id)#" <cfif qPlanningRequests.fk_employee_id EQ qEmployeesInfo.id>selected</cfif>>#NiceCharCrop(lastname & ', ' & initials,40)#</option> 
<cfif form.cmbemployee EQ id><cfset form.employeename = lastname & ', ' & initials></cfif> 
</cfloop> 
</select> 
</td> 

need to be replaced with 

<td>#EmployeesInfo.id#</td> 


and next lines added to js script section
function set_combo(){
     var combo = mygrid.getCombo(2);
     <cfloop query="qEmployeesInfo"> 
          combo.put("#qEmployeesInfo.id#","#NiceCharCrop(lastname & ', ' & initials,40)#");
     </cfloop>
};


>>Is it possible to use 'hidden' columns? (still using the convert option) 
The PRO version of grid supports
          grid.setColumnHidden
command. So you can convert existing table to the grid and hide necessary columns after that. 

>>will I be able to read all the data from the cells and save them to the database? Since I'm not using an XML-file... 
The API of grid works the same for all ways of initialization, so all existing data access API will work in case of init from HTML.

First of thanks for the quick reply!
Now I'm at least able to use a combo in my grid!

Having said that, the given code gave me some problems though:

<table id="datagrid" border="1" onbeforeinit="set_combo()">

function set_combo(){
� � �var combo = mygrid.getCombo(2);
� � �<cfloop query="qEmployeesInfo">�
� � �� � �combo.put("#qEmployeesInfo.id#","#NiceCharCrop(lastname & ', ' & initials,40)#");
� � �</cfloop>
};

The "onbeforeinit" occurs before the grid has been made, so the call to "set_combo" doesn't work, because the function contains "mygrid", which hasn't been initialized yet...

But I've altered the code into the following:

<table id="datagrid" border="1">
<tr>
<td width="20">Id</td>
<td width="200">employeename</td>
</tr>
<cfoutput query="qPlanningRequests">
<tr>
<td>#id#</td>
<td>#employeename#</td>

</tr>
</cfoutput>
</table>

<script>
var mygrid = new dhtmlXGridFromTable('datagrid');
mygrid.setImagePath("<cfoutput>#application.stApplicationData.sJs#</cfoutput>dhtmlxGrid/imgs/")>
mygrid.setSkin("light")
mygrid.setColTypes("ed,ed,co,ed,ed,ed,ed,ed,ed,ed,ed,ed,ed,ed,ed,ed,ed,ed");

var combo = mygrid.getCombo(2);
combo.put("-1"," ");
</script>

<cfoutput query="qEmployeesInfo">
 <script>
 var combo = mygrid.getCombo(2);
 combo.put("#qEmployeesInfo.id#","#NiceCharCrop(rtrim(lastname) & ', ' & initials,40)#");</script>
</cfoutput>

This gives me a combobox in the grid, it's not quite the same as the dhtlmxCombo on my other screens, but it almost suffices.
There are still a few strange things though:
- the employeename, which was first added to the table, is added to the bottom of the list, instead of selecting the one from the list.
- The combo is case sensitive, this is not a serious problem, but it's not consistent with the rest
- I'm able to input anything, even if not in the selection list and leave the cell without having a valid option. I fixed this with the normal dhtmlxCombo by using this :
if (combo.getActualValue()==combo.getComboText()) //non existing option entered
{
   form.combostatus.value='Reset';
   combo.setComboValue("<cfoutput>#form.employeeid#</cfoutput>");
}
else if (form.combostatus.value == 'Reset')
{
   frmProject.combostatus.value=''; 
}
But this doesn't apply here...

Now I've still have to focus on how that API works, I've still got no clue on how to get all the griddata and save it back to the database...

Cheers,
Chris

>>because the function contains "mygrid", which hasn't been initialized yet...
yes, was a my typo, the correct code will be 
function set_combo(){
     var combo = datagrid.getCombo(2);
while "mygrid" is still not created you can use id of souce table ("datagrid" in you case ) as reference for grid object.

>>- the employeename, which was first added to the table, is added to the bottom of the list, instead of selecting the one from the list.
<td>#employeename#</td>  - here you need to use ID, not combo ( to work correctly it requires to call set_combo from before_init as well )

- value/label pairs loaded during grid init ( onbeforeinit)
 - grid loads data from table and convert values to labels ( ID to name) 

>>- I'm able to input anything, even if not in the selection list and leave the cell without having a valid option
Change column type to 
mygrid.setColTypes("ed,ed,coro

>>This gives me a combobox in the grid, it's not quite the same as the dhtlmxCombo 
Actually it is not the dhtmlxCombo, it is a "co" column type - built in combo of dhtmlxGrid
To have real combo in grid, you need to use column type "combo", getCellCombo  instead of getCombo, and addOption instead of put method