Two dependent select boxes in adjacent cells.

usbpaul

Hi,

I'm trying to make the following work: Two columns of my table contain select (dropdown) boxes, next to each other, for "group" and "section" respectively.
Each group has a list of sections for that group.
If a cell in the first column has a given group value, then the cell next to it, when edited should present a dropdown containing the sections for that group. (When a group value is changed in the first column, the section cell next to it is emptied.)
I'm trying to achieve this with the aoColumns property

The following (nonsensical) code is to indicate the approach but statically uses the values of the first row to populate select boxes for all section cells, which is useless. What I guess I would need to do in the 'case "section"' case is an ajax call using the value that is in the group cell, but I don't know if it is possible to obtain that.
Does anybody know how to do this?

Cheers,
Paul

[code]
...
oTable.makeEditable({
...
//articledata contains the data for all records
"aoColumns": articleTable.getAoColumns(articledata[0]),
...
});
[/code]

[code]
articleTable.getAoColumns = function(record) {
var columms = [];
$.each(record, function (fieldName, item) {
var columnDef = {};
switch (fieldName) {
case "group":
columnDef.type = "select";
articleTable.populateGroupSelect(columnDef);
break;
case "section":
columnDef.type = "select";
articleTable.populateSectionSelect(columnDef, record["gr"]);
break;
default:
myCssClass = "defaulttype";
}
columms.push(columnDef);
});
return columms;
};
[/code]