I have a grid that uses many drop down editors for the columns. After I choose an item from the drop down list and hit tab (to go to the next column) it goes to the paging box at the bottom instead. How do I get the grid to tab through the columns? My drop down editor is below along with a few of the column definitions:
var dropDownEditor = function (ui, arr) {
var $cell = ui.$cell,
rowData = ui.rowData,
dataIndx = ui.dataIndx,
dataCell = $.trim(rowData[dataIndx]);
var str = "";
for (var i = 0; i < arr.length; i++) {
if (dataCell == arr)
str += "<option selected>" + arr + "</option>";
else
str += "<option>" + arr + "</option>";
}
var $sel = $("<select name=" + dataIndx + ">" + str + "</select>")
.appendTo($cell);
}
Column definition:
colModel: [
{ title: "Resource ID", dataType: "integer", editable: false, dataIndx: "resourceid" },
{ title: "Resource Name", width: 150, dataType: "string", dataIndx: "resourcename",
validations: [
{ type: 'minLen', value: 1, msg: "Required" },
{ type: 'maxLen', value: 255, msg: "length should be <= 255" }
],
filter: { type: 'textbox', condition: 'contain',
listeners: [{ change: function (evt, ui) {
filter("resourcename", $(this).val());
}
}]
}
},
{ title: "Simulator", width: 150, dataIndx: 'simulator',
editor: {
type: function (ui)
{dropDownEditor(ui,arrSimulators)}
},
filter: { type: 'select',
options: arrSimulators,
condition: 'equal',
listeners: [{ change: function (evt, ui) {
filter("simulator", $(this).val());
}
}]
}
},
{ title: "Simulator Group", width: 150, dataIndx: 'simulatorgroup',
editor: {
type: function (ui)
{dropDownEditor(ui,arrSimulatorGroups)}
},
filter: { type: 'select',
options: arrSimulatorGroups,
condition: 'equal',
listeners: [{ change: function (evt, ui) {
filter("simulatorgroup", $(this).val());
}
}]
}
},
....
