I'am working now on a project in c# asp.net web form and i require to load data from database using jqgrid i able to load the expected result but how can i disable the toolbar below the (edit delete) base on selected row if the shield column is 1
Here's my code on loading the data
<script>
$(document).ready(function () {
loadAuditlogsGrid();
});
function loadAuditlogsGrid() {
$('#Auditgrid').jqGrid("GridUnload");
getlist(function (data) { loadAuditLogs(data); });
}
function getlist(callback) {
$.ajax({
async: true,
type: 'POST',
contentType: 'application/json',
url: 'WebForm1.aspx/getlist',
dataType: 'json',
success: function (data) {
timelog = data.d;
if (typeof callback != 'undefined')
callback(timelog);
},
error: function (xhr, status, error) {
console.log(xhr, status, error);
hideLoadingGif();
}
});
}
function loadAuditLogs(Auditlog) {
var lastsel;
var startpage = 1;
$('#Auditgrid').jqGrid({
datatype: 'local',
data: Auditlog,
editurl: 'clientArray',
colNames: ['NAME', 'Shield'],
colModel: [
{ name: 'name', index: 'name', editable: 'true', align: 'center', width: '190', resizable: false },
{ name: 'shield', index: 'shield', editable: 'true', align: 'center', width: '175', resizable: false },
],
pager: '#Auditgridpager',
viewrecords: true,
forceFit: true,
shrinkToFit: false,
width: '1150',
emptyrecords: "No Record/s found",
loadtext: "Loading",
rowList: [5, 10, 20, 50],
height: 'auto',
caption: 'Audit Logs'
});
$('#Auditgrid').jqGrid('navGrid', '#Auditgridpager', {
edit: true,
save: false,
add: true,
cancel: true,
del: true,
search: false,
refresh: false
});
$('#Auditgrid').jqGrid('inlineNav', '#Auditgridpager', {
add: true,
edit: true,
save: true,
cancel: true,
restoreAfterSelect: false
});
}
</script>
Sorry for my bad english.
I already solve my problem by adding oncellselect here's my final code
<script>
$(document).ready(function () {
loadAuditlogsGrid();
});
function loadAuditlogsGrid() {
$('#Auditgrid').jqGrid("GridUnload");
getlist(function (data) { loadAuditLogs(data); });
}
function getlist(callback) {
$.ajax({
async: true,
type: 'POST',
contentType: 'application/json',
url: 'WebForm1.aspx/getlist',
dataType: 'json',
success: function (data) {
timelog = data.d;
if (typeof callback != 'undefined')
callback(timelog);
},
error: function (xhr, status, error) {
console.log(xhr, status, error);
hideLoadingGif();
}
});
}
function loadAuditLogs(Auditlog) {
var lastsel;
var startpage = 1;
$('#Auditgrid').jqGrid({
datatype: 'local',
data: Auditlog,
editurl: 'clientArray',
colNames: ['NAME', 'Shield'],
colModel: [
{ name: 'name', index: 'name', editable: 'true', align: 'center', width: '190', resizable: false },
{ name: 'shield', index: 'shield', editable: 'true', align: 'center', width: '175', resizable: false },
],
pager: '#Auditgridpager',
viewrecords: true,
forceFit: true,
shrinkToFit: false,
width: '1150',
emptyrecords: "No Record/s found",
loadtext: "Loading",
rowList: [5, 10, 20, 50],
height: 'auto',
caption: 'Audit Logs',
onCellSelect: function (rowid) {
var gridId = $.jgrid.jqID(this.id);
if ($(this).jqGrid('getCell', rowid, 'shield') === '1') {
// disable the "Edit" and "Delete" buttons of the navigator
$("#edit_" + gridId).addClass('ui-state-disabled');
$("#del_" + gridId).addClass('ui-state-disabled');
} else {
// enable the "Edit" and "Delete" buttons of the navigator
$("#edit_" + gridId).removeClass('ui-state-disabled');
$("#del_" + gridId).removeClass('ui-state-disabled');
}
}
});
$('#Auditgrid').jqGrid('navGrid', '#Auditgridpager', {
edit: true,
save: false,
add: true,
cancel: true,
del: true,
search: false,
refresh: false
});
//$('#Auditgrid').jqGrid('inlineNav', '#Auditgridpager', {
// add: true,
// edit: true,
// save: true,
// cancel: true,
// restoreAfterSelect: false
//});
}
</script>