I have two grids, in first I select a value and in second I display the same row but make it editable. It looks like this:
jQuery("#GridSelectedProducts").jqGrid({
height: '100%',
width: '100%',
autowidth: true,
regional: 'en',
/*data:{},*/
datatype: "local",
colNames: ['id', 'productid', 'opportunityproductid', 'Product', 'Product-Title', 'Unit', 'defaultunit', 'uomid', 'Override-Product', 'Price', 'Qty', 'Volumes-Discount', 'Amount', 'Discount-Type', 'Discount', 'Total-After-Discount', 'Cost-Amount', 'Margin', 'Percentage', 'Revenue-Stream', 'Licensing'],
colModel: SelectedProductsModel,
mtype: 'Post',
id: "pw_id",
viewrecords: true,
rowList: [5, 10, 20],
pager: '#pager10_d',
sortable: true,
sortname: 'id',
sortorder: "asc",
multiselect: false,
forceFit: true,
cellEdit: true,
hidegrid: false,
cellsubmit: 'clientArray',
afterSaveCell: Calcul,
loadComplete: $("a").click(),
caption: "Selected Products"
}).navGrid('#pager10_d', {
add: false,
edit: false,
del: true,
refresh: false // NPI : remove refresh button because it empty lines when used on newed added row configured !
});
Revenue Stream and Licensing are drop down fields. I would like to hide specific values in Licensing based on the selected value in Revenue Stream. I couldn't find any resources or articles or questions where I would find that kind of behavior, do you have any idea how can I achieve it ?
After spending a lot of time on this matter I have finally arrived to the solution that works for me and I want to share it with you.
Apparently jqGrid has options for when the grid rendering is happening.
jQuery(#"YourLovelyGrid").jqGrid({
height: '',
width: '',
// a lot of other options
});
I found out that there are events which can also be attached to the above code, those events look like this:
onSelectCell: This event is triggered when a cell is selected. It provides the rowid and the name of the selected cell.
beforeSaveCell: This event is triggered before a cell is saved (i.e., after editing). It allows you to perform actions or validations before the cell data is saved.
afterSaveCell: This event is triggered after a cell is saved (i.e., after editing). It allows you to perform actions after the cell data has been saved.
beforeSelectCell: This event is triggered before a cell is selected. It allows you to perform actions or validations before a cell is selected.
afterEditCell: This event is triggered after a cell is edited. It provides the rowid and cellname of the edited cell.
I used this information to achieve my desired behavior. I have added the logic to beforeEditCell - in here I check if I'm editing my desired cell let's call it X. If when trying to edit X- rowData.Y equals some specific values I attach read only class to the cell and return false(I suppose this is required for jqgrid to function correctly).
beforeEditCell: function (rowid, cellname, value, iRow, iCol) {
var rowData = $("#GridSelectedProducts").jqGrid('getRowData', rowid);
if (cellname === 'Licensing') {
if (rowData.RevenueStream === "Licenses" || rowData.RevenueStream === "Software Updates")
return true;
else {
$("#GridSelectedProducts").jqGrid('setCell', rowId, 'Licensing', '', '', {
'class': 'readonly-cell',
});
return false;
}
}
}
Read only class is pretty simple:
.read-only-cell {
background-color: #f0f0f0;
pointer-events: none;
}
If you would like to clear values based on what you chose in Y cell- you can manipulate with afterEditCell or afterSaveCell, at this moment I can't really identify how control focus and those two events are related. They have pretty random behavior.