Fairly new to jqGrid, still learning a lot. Can't get my head around this problem:
I have one 'select' dropdown field where user selects from a range of categories / names, based on user selection I need to populate the next 'select' dropdown with corresponding set of sub categories.
I load my initial list using dataUrl and the sub-categories need to be loaded from dataUrl too.
My code so far:
$(function () {
var lastsel2
$("#jqGrid_BdgtEmp").jqGrid({
regional: 'en',
prmNames: { id: "empTbID" },
url: "/Budget/GetBdgtEmp",
datatype: 'json',
mtype: 'Get',
colNames: ['EmpTbID', 'DepartmentId', 'DepartmentName', 'EmployeeName', 'EmployeeJobFunctionId', 'EmployeeJobFunctionName', 'EmpStart', 'EmpEnd', 'BsBasic', 'BsPayRise', 'BsComm', 'BsOverTime',
'BsMthBonus', 'BsQtrBonus', 'BsGross', 'RatesEmpNhi', 'RatesPension', 'BoEmpNhi', 'BoPension', 'BoHealth', 'BoBenefits', 'BoTotal', 'CarStatus', 'CarWDown', 'CarFuel', 'CarRunCost', 'CarTotal',
'PayRisePercent', 'PayRiseStart'],
colModel: [
{ key: true, name: 'empTbID', index: 'empTbID', editable: false, editoptions: { "class": "jqgrid-readonlycolumn" } },
{ key: false, name: 'departmentId', index: 'departmentId', editable: true },
{
key: false,
name: 'departmentName',
index: 'departmentName',
editable: true,
edittype: 'select',
editoptions:
{
size: 1,
dataUrl: '/Budget/GetDepartmentListSel'
}
},
{ key: false, name: 'employeeName', index: 'employeeName', editable: true },
{ key: false, name: 'employeeJobFunctionId', index: 'employeeJobFunctionId', editable: true },
{
key: false,
name: 'employeeJobFunctionName',
index: 'employeeJobFunctionName',
editable: true
},
{ key: false, name: 'empStart', index: 'empStart', editable: true },
{ key: false, name: 'empEnd', index: 'empEnd', editable: true },
{ key: false, name: 'bsBasic', index: 'bsBasic', editable: true },
{ key: false, name: 'bsPayRise', index: 'bsPayRise', editable: true },
{ key: false, name: 'bsComm', index: 'bsComm', editable: true },
{ key: false, name: 'bsOverTime', index: 'bsOverTime', editable: true },
{ key: false, name: 'bsMthBonus', index: 'bsMthBonus', editable: true },
{ key: false, name: 'bsQtrBonus', index: 'bsQtrBonus', editable: true },
{ key: false, name: 'bsGross', index: 'bsGross', editable: true },
{ key: false, name: 'ratesEmpNhi', index: 'ratesEmpNhi', editable: true },
{ key: false, name: 'ratesPension', index: 'ratesPension', editable: true },
{ key: false, name: 'boEmpNhi', index: 'boEmpNhi', editable: true },
{ key: false, name: 'boPension', index: 'boPension', editable: true },
{ key: false, name: 'boHealth', index: 'boHealth', editable: true },
{ key: false, name: 'boBenefits', index: 'boBenefits', editable: true },
{ key: false, name: 'boTotal', index: 'boTotal', editable: true },
{ key: false, name: 'carStatus', index: 'carStatus', editable: true },
{ key: false, name: 'carWDown', index: 'carWDown', editable: true },
{ key: false, name: 'carFuel', index: 'carFuel', editable: true },
{ key: false, name: 'carRunCost', index: 'carRunCost', editable: true },
{ key: false, name: 'carTotal', index: 'carTotal', editable: true },
{ key: false, name: 'payRisePercent', index: 'payRisePercent', editable: true },
{ key: false, name: 'payRiseStart', index: 'payRiseStart', editable: true }],
onSelectRow: function (empTbID) {
if (empTbID && empTbID !== lastsel2) {
$("#jqGrid_BdgtEmp").restoreRow(lastsel2);
$("#jqGrid_BdgtEmp").editRow(empTbID, true, '', '', '', '', reload);
lastsel2 = empTbID;
}
},
footerrow: true,
userDataOnFooter : true,
editurl: '/Budget/EditBdgtEmp',
pager: jQuery('#jqControlls_BdgtEmp'),
rowNum: 10,
rowList: [10, 20, 30, 40, 50],
height: '100%',
viewrecords: true,
caption: 'Employees',
emptyrecords: 'No employees to display',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "0"
},
autowidth: false,
shrinkToFit:false,
forceFit:false,
multiselect: false,
loadComplete: function () {
// footer data
$(this).jqGrid("footerData", "set", {
empTbID: "<b>Total:</b>",
bsBasic: $(this).jqGrid('getCol', 'bsBasic', false, 'sum'),
bsPayRise: $(this).jqGrid('getCol', 'bsPayRise', false, 'sum'),
bsComm: $(this).jqGrid('getCol', 'bsComm', false, 'sum')
});
}
}).navGrid('#jqControlls_BdgtEmp', { edit: true, add: true, del: true, search: false, refresh: true },
{
zIndex: 100,
url: '/Budget/EditBdgtEmp',
closeOnEscape: true,
closeAfterEdit: true,
recreateForm: true,
afterComplete: function (response) {
if (response.responseText) {
console.log(response.responseText);
}
}
},
{
zIndex: 100,
url: "/Budget/CreateBdgtEmp",
closeOnEscape: true,
closeAfterAdd: true,
afterComplete: function (response) {
if (response.responseText) {
console.log(response.responseText);
}
}
},
{
zIndex: 100,
url: "/Budget/DeleteBdgtEmp",
closeOnEscape: true,
closeAfterDelete: true,
recreateForm: true,
msg: "Are you sure you want to delete this row? ",
afterComplete: function (response) {
if (response.responseText) {
console.log(response.responseText);
}
}
});
$("#jqGrid_BdgtEmp").jqGrid('setGroupHeaders', {
useColSpanStyle: false,
groupHeaders: [
{ startColumnName: 'empTbID', numberOfColumns: 12, titleText: '<b>Top level placeholder</b>' }
]
});
$("#jqGrid_BdgtEmp").jqGrid('setGroupHeaders', {
useColSpanStyle: false,
groupHeaders: [
{ startColumnName: 'empTbID', numberOfColumns: 2, titleText: '<b>Mid placeholder 1</b>' },
{ startColumnName: 'departmentName', numberOfColumns: 6, titleText: '<b>Mid placeholder 2</b>' }
]
});
function reload(empTbID, result) {
$("#jqGrid_BdgtEmp").trigger("reloadGrid");
}
});
So in my example above, when user selects the department I need to then load a relevant list of Job Function descriptions based on that initial selection.
Secondary question;
Can you link more than two select fields in a row, as in 'Select 1' (leads to) -> Specific options in 'Select 2' (leads to) -> Specific options in 'Select 3' and so on?
Research and what I tried so far
EDIT #2
This is somewhat what I need, albeit done in handsontable: JsFiddle
Taken from this discussion: GitHub
