I have jqGrid with all rows inline edit mode and I am trying to implement cascading drop-downs for such configuration.
I was trying to use oneditfunc function for editRow, but I am not able to find dropdown in this event and filter its options.
I will be really grateful for help in that case.
Below you can find my code with dataInit:
//I am using webserbvce to get data by $ajax, and on success I am calling addJSONData thats
// way I am using girdComplete to set rows in edit mode instead of loadComplete
//this is simple json string for demonstration
var gridJson = { Total: 1, Records: 4, Page: 1, Rows: [
{ Id: 1, Key: "2013-10-23 11:02:42.643#4#6#18", Title: "Title 1", GroupId: 1, SubGroupId: 1 },
{ Id: 2, Key: "2013-10-02 09:35:07.417#4#6#19", Title: "Title 2", GroupId: 2, SubGroupId: 6 },
{ Id: 3, Key: "2013-10-02 09:37:24.663#4#6#20", Title: "Title 3", GroupId: 3, SubGroupId: 10 },
{ Id: 4, Key: "2013-10-04 16:27:37.530#4#6#21", Title: "Title 4", GroupId: 4, SubGroupId: 15 }
]
};
var gridDataGroup = { 1: "Group One", 2: "Group Two", 3: "Group Three", 4: "Group Four" };
var gridDataSubGroup1 = { 1: "Sub goup 1-1", 2: "Sub group 1-2", 3: "Sub group 1-3", 4: "Sub group 1-4" };
var gridDataSubGroup2 = { 5: "Sub group 2-1", 6: "Sub group 2-2", 7: "Sub group 2-3" };
var gridDataSubGroup3 = { 8: "Sub group 3-1", 9: "Sub group 3-2", 10: "Sub group 3-3", 11: "Sub group 3-4", 12: "Sub group 3-5" };
var gridDataSubGroup4 = { 13: "Sub group 4-1", 14: "Sub group 4-2", 15: "Sub group 4-3", 15: "Sbu group 4-4" };
var gridDataSubGroup = {
1: gridDataSubGroup1,
2: gridDataSubGroup2,
3: gridDataSubGroup3,
4: gridDataSubGroup4
}
var gridDataSubGroupAll = {};
$.extend(gridDataSubGroupAll, gridDataSubGroup1, gridDataSubGroup2, gridDataSubGroup3, gridDataSubGroup4);
//initialize jqGrid
$grid.jqGrid({
//datatype: 'json',
datatype: 'jsonstring',
datastr: gridJson,
jsonReader: {
repeatitems: false,
root: "Rows",
page: "Page",
total: "Total",
records: "Records",
id: "Key"
},
colNames: [
'Key',
'Title',
'Group',
'Subgroup'
],
colModel: [
{ name: 'Key', index: 'Key', width: 300, stype: 'text' },
{ name: 'Title', index: 'Title', width: 300, stype: 'text', editable: true, edittype: "text" },
{ name: 'Group', index: 'GroupId', jsonmap: 'GroupId', width: 200, stype: "select", editable: true, edittype: "select", formatter: "select",
sorttype: function(cell) {
return gridDataGroup[cell];
},
editoptions: {
value: gridDataGroup,
dataInit: function(elem) {
var groupId = $(elem).val();
$grid.setColProp('SubGroup', { editoptions: { value: gridDataSubGroup[groupId]} });
},
dataEvents: [
//{ type: "change", fn: function (e) { TODO } },
//{ type: "keyup", fn: function (e) { TODO} }
]
}
},
{ name: 'SubGroup', index: 'SubGroupId', jsonmap: 'SubGroupId', width: 200, stype: "select", editable: true, edittype: "select", formatter: "select",
sorttype: function(cell) {
return gridDataSubGroupAll[cell];
},
editoptions: {
value: gridDataSubGroupAll
}
}
],
pager: $('#pager'),
sortname: 'Key',
viewrecords: true,
sortorder: "asc",
caption: "jqGrid",
height: '100%',
shrinkToFit: true,
//Required for client side sorting
loadonce: true,
altRows: true,
gridComplete: function() {
//set jqGrid datatype to local
$grid.setGridParam({ datatype: 'local' });
//set all rows in editRow mode
var $this = $(this), ids = $this.jqGrid('getDataIDs'), i, l = ids.length;
for (i = 0; i < l; i++) {
$this.jqGrid('editRow', ids[i],
{
keys: true,
oneditfunc: function() {
}
});
};
},
onCellSelect: function(rowid, icol, cellcontent, e) { alert(cellcontent); },
//muliSort works only on local dataset
multiSort: true
});
//in order to allow sorting rows in edit mode
//first save all changes and then sort.
// on gridComplete rows are going back to edit mode
$.each($grid[0].grid.headers, function() {
var $th = $(this.el), i, l, clickHandler, clickHandlers = [],
currentHandlers = $._data($th[0], "events"),
clickBinding = currentHandlers.click;
if ($.isArray(clickBinding)) {
for (i = 0, l = clickBinding.length; i < l; i++) {
clickHandler = clickBinding[i].handler;
clickHandlers.push(clickHandler);
$th.unbind('click', clickHandler);
}
}
$th.click(function() {
var p = $grid[0].p, savedRow = p.savedRow, j, len = savedRow.length;
if (len > 0) {
// there are rows in cell editing or inline editing
if (p.cellEdit) {
// savedRow has the form {id:iRow, ic:iCol, name:nm, v:value}
// we can call restoreCell or saveCell
//$grid.jqGrid("restoreCell", savedRow[0].id, savedRow[0].ic);
$grid.jqGrid("saveCell", savedRow[0].id, savedRow[0].ic);
} else {
// inline editing
for (j = len - 1; j >= 0; j--) {
// call restoreRow or saveRow
//$grid.jqGrid("restoreRow", savedRow[j].id);
$grid.jqGrid("saveRow", savedRow[j].id);
}
}
}
});
l = clickHandlers.length;
if (l > 0) {
for (i = 0; i < l; i++) {
$th.bind('click', clickHandlers[i]);
}
}
});
The issue is that dropdown for Subgroup contains all options is not filtered base on GroupId by this code:
dataInit: function(elem) {
var groupId = $(elem).val();
$grid.setColProp('SubGroup', { editoptions: { value: gridDataSubGroup[groupId]} });
Unfortunately I am not able to post screen shot but all 4 rows are in edit mode, and drop-down for Subgroup contains all subgroups.
UPDATE I was trying to use this approach but I am not able to find drop-down in inline edit mode.
oneditfunc. To understand the problem which you have you should described more clear your problem. The text "I am not able to find dropdown in this event and filter its options" is not clear enough. You can post code fragment for example. – Oleg