Develop Reference

how to align jqgrid table header and row column properly

table header and data rows column not align
jQuery("#tblCriticalList").jqGrid({
datatype: 'local',
colNames: ['Time', '7AM', '8AM', '9AM', '10AM', '11AM', '12PM', '1PM', '2PM', '3PM', '4PM', '5PM', '6PM', '7PM', '8PM', '9PM',
'10PM', '11PM', '12AM', '1AM', '2AM', '3AM', '4AM', '5AM', '6AM'],
colModel: [
{ name: 'DESC', index: 'DESC', width: 200, align: "left", frozen: true, sortable: false },
{ name: '7AM', index: '7AM', width: 35, align: "right", sortable: false },
{ name: '8AM', index: '8AM', width: 35, sortable: false, align: "right" },
{ name: '9AM', index: '9AM', width: 35, align: "right", sortable: false },
{ name: '10AM', index: '10AM', width: 35, align: "right", sortable: false },
{ name: '11AM', index: '11AM', width: 35, align: "right", sortable: false },
{ name: '12PM', index: '12PM', width: 35, align: "right", sortable: false },
{ name: '1PM', index: '1PM', width: 35, align: "right", sortable: false },
{ name: '2PM', index: '2PM', width: 35, align: "right", sortable: false },
{ name: '3PM', index: '3PM', width: 35, align: "right", sortable: false },
{ name: '4PM', index: '4PM', width: 35, align: "right", sortable: false },
{ name: '5PM', index: '5PM', width: 35, align: "right", sortable: false },
{ name: '6PM', index: '6PM', width: 35, align: "right", sortable: false },
{ name: '7PM', index: '7PM', width: 35, align: "right", sortable: false },
{ name: '8PM', index: '8PM', width: 35, align: "right", sortable: false },
{ name: '9PM', index: '9PM', width: 35, align: "right", sortable: false },
{ name: '10PM', index: '10PM', width: 35, align: "right", sortable: false },
{ name: '11PM', index: '11PM', width: 35, align: "right", sortable: false },
{ name: '12AM', index: '12AM', width: 35, align: "right", sortable: false },
{ name: '1AM', index: '1AM', width: 35, align: "right", sortable: false },
{ name: '2AM', index: '2AM', width: 35, align: "right", sortable: false },
{ name: '3AM', index: '3AM', width: 35, align: "right", sortable: false },
{ name: '4AM', index: '4AM', width: 35, align: "right", sortable: false },
{ name: '5AM', index: '5AM', width: 35, align: "right", sortable: false },
{ name: '6AM', index: '6AM', width: 35, align: "right", sortable: false }
],
shrinkToFit: false,
forceFit: false,
cellsubmit: 'clientArray',
loadonce: true,
ignoreCase: true,
rowNum: 1000,
sortorder: 'asc',
gridview: true,
width: 1185,
height: 720,
jsonReader: { cell: "" },
rowattr: function (rd) {
if (rd["DESC"] == "Hygiene and ADL") {
return { "class": "backcolor" };
}
},
loadComplete: {
}

Uncaught TypeError: $(...).jqGrid is not a function on subGridRowExpanded

I'm trying to load data into a jqGrid sub grid (subgrid as grid) and get the above error on this line:
$("#" + subgrid_table_id).jqGrid
Please help - thanks.
My JS code:
<link rel="stylesheet" href="~/Styles/ui.jqgrid-bootstrap.css" />
<link rel="stylesheet" href="~/Styles/ui.jqgrid-bootstrap-ui.css" />
<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/JqGrid/jquery.jqGrid.min.js"></script>
<script src="~/Scripts/JqGrid/jquery.jqGrid.js"></script>
<script src="~/Scripts/JqGrid/grid.jqueryui.js"></script>
<script src="~/Scripts/JqGrid/grid.subgrid.js"></script>
<script src="~/Scripts/JqGrid/jqModal.js"></script>
<script src="~/Scripts/JqGrid/i18n/grid.locale-he.js"></script>
<div id="jqGrid">
<table id="grid" style="float:right; width:100%"></table>
<div id="pager" style="float:right;"></div>
</div>
<script type="text/javascript">
var gridDataUrl = 'GetAllPurchasesJson';
var lastSel;
$("#grid").jqGrid({
url: gridDataUrl,
datatype: "json",
mtype: 'POST',
jsonReader: {
root: 'gridModel',
repeatitems: true,
subgrid: {root:'rows', repeatitems: true, cell:"cell" }
}
,
colNames: ['Id','סטטוס','סה"כ כולל מע"מ','מע"מ','סה"כ ללא מע"מ','תאריך אספקה','תאריך הזמנה','ספק','מספר הזמנה'],
colModel: [
{ name: 'Id', index: 'Id', width: 50, align: 'right', hidden: true },
{
name: 'Status',
index: 'סטטוס',
width: 100,
align: 'right',
editable: true,
},
{
name: 'Total',
index: 'סה"כ כולל מע"מ',
width: 100,
align: 'right',
},
{ name: 'Vat', index: 'מע"מ', width: 100, align: 'right' },
{ name: 'TotalNoVat', index: 'סה"כ ללא מע"מ', width: 100, align: 'right' },
{ name: 'ArrivedDate', index: 'תאריך אספקה', width: 100, align: 'right', formatter: 'date', formatoptions: { srcformat: 'U', newformat: 'd/m/Y' } },
{ name: 'OrderDate', index: 'תאריך הזמנה', width: 100, align: 'right', formatter: 'date', formatoptions: { srcformat: 'U', newformat: 'd/m/Y' } },
{ name: 'Supplier', index: 'ספק', width: 100, align: 'right' },
{ name: 'OrderNumber', index: 'מספר הזמנה', width: 100, align: 'right' }
],
cmTemplate: { editable: false },
rowNum: 20,
rowList: [10, 20, 30],
height: 'auto',
width: '800',
pager: jQuery('#pager'),
sortname: 'Name',
viewrecords: true,
sortorder: "desc",
regional: 'he',
editurl: '#Url.Action("SaveOrUpdateProduct", "Inventory")',
subGrid: true,
subGridRowExpanded: function(subgrid_id, row_id) {
// we pass two parameters
// subgrid_id is a id of the div tag created within a table
// the row_id is the id of the row
// If we want to pass additional parameters to the url we can use
// the method getRowData(row_id) - which returns associative array in type name-value
// here we can easy construct the following
var subgrid_table_id;
subgrid_table_id = subgrid_id+"_t";
$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>");
$("#" + subgrid_table_id).jqGrid({
url:"GetPurchaseDetailes/"+row_id,
datatype: "json",
colNames: ['Id','Status','ActualTotal','ActualVat','ActualPaid'],
colModel: [
{name:"Id",index:"Id",width:80,key:true},
{name:"Status",index:"Status",width:130},
{name:"ActualTotal",index:"ActualTotal",width:80,align:"right"},
{name:"ActualVat",index:"ActualVat",width:80,align:"right"},
{name:"ActualPaid",index:"ActualPaid",width:100,align:"right",sortable:false}
],
height: '100%',
rowNum:20,
sortname: 'Id',
sortorder: "asc"
});
} });

This looks like a jQuery conflict to me: https://api.jquery.com/jquery.noconflict/
Try wrapping your jQuery in an anonymous function as below:
(function($) {
// jQuery code
})(jQuery);
Your jQuery on your page will then look something like the below:
<script type="text/javascript">
(function($) {
var gridDataUrl = 'GetAllPurchasesJson';
var lastSel;
$("#grid").jqGrid({
url: gridDataUrl,
datatype: "json",
mtype: 'POST',
jsonReader: {
root: 'gridModel',
repeatitems: true,
subgrid: {root:'rows', repeatitems: true, cell:"cell" }
}
,
colNames: ['Id','סטטוס','סה"כ כולל מע"מ','מע"מ','סה"כ ללא מע"מ','תאריך אספקה','תאריך הזמנה','ספק','מספר הזמנה'],
colModel: [
{ name: 'Id', index: 'Id', width: 50, align: 'right', hidden: true },
{
name: 'Status',
index: 'סטטוס',
width: 100,
align: 'right',
editable: true,
},
{
name: 'Total',
index: 'סה"כ כולל מע"מ',
width: 100,
align: 'right',
},
{ name: 'Vat', index: 'מע"מ', width: 100, align: 'right' },
{ name: 'TotalNoVat', index: 'סה"כ ללא מע"מ', width: 100, align: 'right' },
{ name: 'ArrivedDate', index: 'תאריך אספקה', width: 100, align: 'right', formatter: 'date', formatoptions: { srcformat: 'U', newformat: 'd/m/Y' } },
{ name: 'OrderDate', index: 'תאריך הזמנה', width: 100, align: 'right', formatter: 'date', formatoptions: { srcformat: 'U', newformat: 'd/m/Y' } },
{ name: 'Supplier', index: 'ספק', width: 100, align: 'right' },
{ name: 'OrderNumber', index: 'מספר הזמנה', width: 100, align: 'right' }
],
cmTemplate: { editable: false },
rowNum: 20,
rowList: [10, 20, 30],
height: 'auto',
width: '800',
pager: jQuery('#pager'),
sortname: 'Name',
viewrecords: true,
sortorder: "desc",
regional: 'he',
editurl: '#Url.Action("SaveOrUpdateProduct", "Inventory")',
subGrid: true,
subGridRowExpanded: function(subgrid_id, row_id) {
// we pass two parameters
// subgrid_id is a id of the div tag created within a table
// the row_id is the id of the row
// If we want to pass additional parameters to the url we can use
// the method getRowData(row_id) - which returns associative array in type name-value
// here we can easy construct the following
var subgrid_table_id;
subgrid_table_id = subgrid_id+"_t";
$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>");
$("#" + subgrid_table_id).jqGrid({
url:"GetPurchaseDetailes/"+row_id,
datatype: "json",
colNames: ['Id','Status','ActualTotal','ActualVat','ActualPaid'],
colModel: [
{name:"Id",index:"Id",width:80,key:true},
{name:"Status",index:"Status",width:130},
{name:"ActualTotal",index:"ActualTotal",width:80,align:"right"},
{name:"ActualVat",index:"ActualVat",width:80,align:"right"},
{name:"ActualPaid",index:"ActualPaid",width:100,align:"right",sortable:false}
],
height: '100%',
rowNum:20,
sortname: 'Id',
sortorder: "asc"
});
}
});
})(jQuery);
</script>

How to edit foreign key in jqgrid?

I have the Foreign key in JqGrid and show name of foreign key in grid.
when i want to edit, method don't send value of foreign key and value of foreign key is null:
public ActionResult EditState(tblState state)
{
UserRepository user = new UserRepository();
state.UserIDChange_FK = Convert.ToInt64(user.FindUserID(User.Identity.Name));
state.StateDateChange = (DateTime.Now);
state.StateDateCreate = DateTimeConvertor.ToDateTime(state.StateDateCreate.ToString());
if (ModelState.IsValid)
{
StateRepository mr = new StateRepository();
if (mr.Update(state, true))
{
return MessageBox.Show("success", MessageType.Success, modal: true, layout: MessageAlignment.Center);
}
else
{
return MessageBox.Show("don not success", MessageType.Error, modal: true, layout: MessageAlignment.Center);
}
}
return Json(true);
}
Script of jqgrid:
<script type="text/javascript">
$(document).ready(function () {
$('#list').jqGrid({
caption: "State Info",
url: '#Url.Action("GetState", "LocationGrid")',
editurl: '#Url.Action("EditState", "LocationGrid")',
datatype: 'json',
jsonReader: {
root: "Rows",
page: "Page",
total: "Total",
records: "Records",
repeatitems: true,
id: "StateID",
cell: "RowCells"
},
mtype: 'POST',
colNames: ['ID','state','UserIDCreate_FK','UserIDChange_FK','StateDateCreate','StateDateChange', ''],
colModel: [
{
name: 'StateID', index: 'StateID',
editable: false, hidden: true, key: true
},
{
name: 'StateName', index: 'StateName', align: 'center', width: 120,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'text',
editoptions: {
maxlength: 40
},
editrules: {
required: true
}
},
{
name: 'UserIDCreate_FK', index: 'UserIDCreate_FK', align: 'center', width: 80,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, editoptions: { readonly: 'readonly' }
},
{
name: 'UserIDChange_FK', index: 'UserIDChange_FK', align: 'center', width: 80,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: false, edittype: 'text',
editoptions: {
maxlength: 40
},
editrules: {
required: true
}
}
,
{
name: 'StateDateCreate', index: 'StateDateCreate', align: 'center', width: 135,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, editoptions: { readonly: 'readonly' }
},
{
name: 'StateDateChange', index: 'StateDateChange', align: 'center', width: 135,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: false, edittype: 'text',
editoptions: {
maxlength: 40
},
editrules: {
required: true
}
},
{
name: 'myac', width: 80, fixed: true, sortable: false, search: false,
resize: false, formatter: 'actions',
formatoptions: {
keys: true
}
}
],
rowNum: 10,
rowList: [10, 20, 50, 100],
sortname: 'StateID',
sortorder: 'desc',
viewrecords: true,
altRows: true,
shrinkToFit: false,
width: '900',
height: 'auto',
hidegrid: false,
direction: "rtl",
gridview: true,
rownumbers: true,
footerrow: true,
loadComplete: function () {
$("tr.jqgrow:odd").css("background", "#E0E0E0");
},
loadError: function (xhr, st, err) {
jQuery("#rsperror").html("Type: " + st + "; Response: " + xhr.status + " " + xhr.statusText);
}
})
;
});
Bellow picture show that UserIDCreate_FK is null but in grid this feild has value.

How to Select All row from all page of jqgrid

How can I get all of the rows or IDs that are not removed after a user uses the filter toolbar?
My jqgrid:
I use :
var selRow = jQuery("#list").jqGrid('getGridParam', 'selarrrow');
But this code get 3 of row and I want all row of other pages selected!!!
javascript code:
<script type="text/javascript">
var searchOptions = ['eq', 'ne', 'lt', 'le', 'gt', 'ge', 'bw', 'bn', 'in', 'ni', 'ew', 'en', 'cn', 'nc'];
$(document).ready(function () {
$('#list').jqGrid({
caption: "",
//url from wich data should be requested
url: '#Url.Action("GetAllMet", "MetGrid")',
//type of data
datatype: 'json',
jsonReader: {
root: "Rows",
page: "Page",
total: "Total",
records: "Records",
repeatitems: true,
id: "MetID",
cell: "RowCells"
},
//url access method type
mtype: 'POST',
//columns names
colNames: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ' ', '', '', '', '', '', '', '', '', ''],
//columns model
colModel: [
{
name: 'MetID', index: 'MetID',
editable: false, hidden: true, key: true
},
{
name: 'WaterSharingNo', index: 'WaterSharingNo', align: 'center', width: 70,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'text'
},
{
name: 'PowerSharingNo', index: 'PowerSharingNo', align: 'center', width: 70,
//formatter: formatNumber,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'text'
}
,
{
name: 'Serial', index: 'Serial', align: 'center', width: 70,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'text'
},
{
name: 'TypeID_FK', index: 'TypeID_FK', align: 'center', width: 90,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'select',
editoptions: {
dataUrl: '#Url.Action("TypeMeterSelect", "MeterGrid")'
}
},
{
name: 'UseID_FK', index: 'UseID_FK', align: 'center', width: 80,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'select',
editoptions: {
dataUrl: '#Url.Action("UseMetSelect", "MetGrid")'
}
},
{
name: 'TypeModID_FK', index: 'TypeModID_FK', align: 'center', width: 90,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, editoptions: { readonly: 'readonly' }
},
{
name: 'ModID_FK', index: 'ModID_FK', align: 'center', width: 80,
//formatter: formatNumber,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'text',
editoptions: {
dataInit: function (elem) {
// http://jqueryui.com/autocomplete/
$(elem).autocomplete({
source: '#Url.Action("GetModSerial","MetGrid")',
minLength: 2,
select: function (event, ui) {
$(elem).val(ui.item.value);
$(elem).trigger('change');
}
});
}
}
},
{
//shomare sim kart
name: 'ModCelNo', index: 'ModCelNo', align: 'center', width: 70,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'text'
},
{
name: 'GroupID_FK', index: 'GroupID_FK', align: 'center', width: 70,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'select',
editoptions: {
dataUrl: '#Url.Action("GroupSelect", "MetGrid")'
}
},
{
name: 'AffairID_FK', index: 'AffairID_FK', align: 'center', width: 90,
//formatter: formatNumber,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'select',
editoptions: {
dataUrl: '#Url.Action("AffairSelect", "MetGrid")'
}
},
{
name: 'DesertID_FK', index: 'DesertID_FK', align: 'center', width: 90,
//formatter: formatNumber,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'select',
editoptions: {
dataUrl: '#Url.Action("DesertSelect", "MetGrid")'
}
},
{
name: 'wnerName', index: 'wnerName', align: 'center', width: 90,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'text'
},
{
name: 'MetDateInstall', index: 'MetDateInstall', align: 'center', width: 170,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'text',
editoptions: {
maxlength: 40
}
},
{
name: 'Emplacement', index: 'Emplacement', align: 'center', width: 90,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'text',
editoptions: {
maxlength: 40
}
},
{
name: 'WarrantyStartDate', index: 'WarrantyStartDate', align: 'center', width: 170,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'text',
editoptions: {
maxlength: 40
}
},
{
name: 'WarrantyEndDate', index: 'WarrantyEndDate', align: 'center', width: 170,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'text'
},
{
name: 'CelOwner', index: 'CelOwner', align: 'center', width: 70,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'text',
editoptions: {
maxlength: 40
}
}, {
name: 'CityID_FK', index: 'CityID_FK', align: 'center', width: 80,
//formatter: formatNumber,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'select',
editoptions: {
dataUrl: '#Url.Action("CitySelect", "MeterGrid")'
}
},
{
name: 'UserIDCreate_FK', index: 'UserIDCreate_FK', align: 'center', width: 80,
//formatter: formatNumber,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, editoptions: { readonly: 'readonly' }
},
{
name: 'UserIDChange_FK', index: 'UserIDChange_FK', align: 'center', width: 80,
//formatter: formatNumber,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: false, edittype: 'text',
editoptions: {
maxlength: 40
}
},
{
name: 'MetDateCreate', index: 'MetDateCreate', align: 'center', width: 170,
//formatter: formatNumber,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, editoptions: { readonly: 'readonly' }
},
{
name: 'MetDateChange', index: 'MetDateChange', align: 'center', width: 170,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: false, edittype: 'text',
editoptions: {
maxlength: 40
}
},
{
name: 'SettingID_FK', index: 'SettingID_FK', align: 'center', width: 80,
//formatter: formatNumber,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'select',
editoptions: {
dataUrl: '#Url.Action("SettingSelect", "MeterGrid")'
}
},
{
name: 'Metitle', index: 'Metitle', align: 'center', width: 90,
//formatter: formatNumber,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'text',
editoptions: {
maxlength: 40
}
},
{
name: 'Longitude', index: 'Longitude', align: 'center', width: 70,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'text',
editoptions: {
maxlength: 40
}
},
{
name: 'Latitude', index: 'Latitude', align: 'center', width: 70,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'text',
editoptions: {
maxlength: 40
}
},
{
name: 'myac', width: 50, fixed: true, sortable: false, search: false,
resize: false, formatter: 'actions',
formatoptions: {
keys: true
}
}
],
//pager for grid
pager: $('#pager'),
toppager: true,
//number of rows per page
rowNum: 10,
rowList: [10, 20, 50, 100],
//initial sorting column
sortname: 'MetID',
//initial sorting direction
sortorder: 'desc',
//we want to display total records count
viewrecords: true,
altRows: true,
shrinkToFit: false,
width: '900',
height: 'auto',
hidegrid: false,
direction: "rtl",
gridview: true,
rownumbers: true,
multiselect: true,
footerrow: true,
//loadonce:true,
//userDataOnFooter: true,
loadComplete: function () {
//change alternate rows color
$("tr.jqgrow:odd").css("background", "#E0E0E0");
},
loadError: function (xhr, st, err) {
jQuery("#rsperror").html("Type: " + st + "; Response: " + xhr.status + " " + xhr.statusText);
}
})
//jQuery("#list").jqGrid('filterToolbar', { searchOperators: true })
.jqGrid('navGrid', "#pager",
{ cloneToTop: true, add: false, edit: false, del: false },
{}, // default settings for edit
{}, // default settings for add
{}, // delete instead that del:false we need this
{
// search options
multipleSearch: true,
closeOnEscape: true,
closeAfterSearch: true,
ignoreCase: true
})
.jqGrid('navButtonAdd', '#pager',
{
caption: "", title: "Reorder Columns",
onClickButton: function () {
jQuery("#list").jqGrid('columnChooser');
}
})
.jqGrid('navButtonAdd', '#pager', {
caption: "pdf", buttonicon: "ui-icon-print", title: "pdf",
onClickButton: function () {
$("#list").jqGrid('excelExport', { url: '#Url.Action("ReadCommand", "MetGrid")' });
}
})
.jqGrid('navButtonAdd', '#pager',
{
caption: "FF", buttonicon: "ui-icon-signal-diag", title: "FF",
onClickButton: function () {
var selRow = jQuery("#list").jqGrid('getGridParam', 'selarrrow'); //get selected rows
//var selRow = jQuery('#list').getGridParam(rowKey); //get selected rows
if (selRow == 0) {
// display error message because no row is selected
$.jgrid.viewModal("#" + 'alertmod_' + this.p.id,
{ gbox: "#gbox_" + $.jgrid.jqID(this.p.id), jqm: true });
$("#jqg_alrt").focus();
}
else {
var dataToSend = JSON.stringify(selRow)
$.ajax({
url: '#Url.Action("Index", "AddSMS")' + '?cbChecked=' + $("input.myMultiSearch").is(":checked"),
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: dataToSend,
dataType: 'json',
success: function (result) {
alert('success');
}
});
}
}
})
$("#pager_left table.navtable tbody tr").append( // here 'pager' part or #pager_left is the id of the pager
'<td><div><input type="checkbox" class="myMultiSearch" id="WithSetting" name="setting"/>setting</div></td>');
function toolbarSearching() {
$('#list').filterToolbar({
groupOp: 'OR',
defaultSearch: "cn",
autosearch: true,
searchOnEnter: true,
searchOperators: true, //
stringResult: true //
});
};
function singleSearching() {
$('#list').searchGrid({
multipleSearch: true,
closeAfterSearch: true
});
function advancedSearching() {
$('#list').searchGrid({
multipleSearch: true,
closeAfterSearch: true
});
};
}
})
</script>

Changing an editable JqGrid row back to Uneditable without using cancel button

I have a question regarding jqgrid. In order to edit a row in my grid you have to select the edit button that is using the action formatter. This makes almost the whole row editable.
My question is that if the user clicks another rows edit button, instead of the cancel or submit button on the currently editable row, is there a way to return the first editable row to a non-editable state while leaving the newly selected row editable?
Here's the grid if you want to check is out. Rather large amount of code. The data is passed to the grid through a function. This is part of a large MVC app. The data is in json format.
Suggestions on which direction to go would be greatly appreciated.
grid.jqGrid({
datatype: "local",
data: gridData,
colNames: ['Action', 'ID', 'Center', 'DBA', 'Check Number', 'Received Date', 'Check Amount', 'Unposted Amount', 'Posted Amount', 'Comments', 'Check Date', 'Received By', 'Withdrawn By', 'Withdrawal Date', 'Witness', 'Is Posted?', 'Is NSed?', 'Refunded Amount', 'Batch Number'],
colModel: [
{ name: 'act', index: 'act', width: 55, align: 'center', sortable: false, formatter: 'actions',
formatoptions: { keys: true,
delbutton: false,
extraparam: { CheckLogId: getChecklogId, IsPosted: getIsPosted, CheckAmountPosted: getCheckAmountPosted, BatchNumberSequence: getBatchSeqNumber, IsNSed: getIsNSed },
afterSave: afterEditSave,
onSuccess: afterOnSuccess,
afterRestore: function (rowid) {
var acc_list = getAccountDBAOnCenter(last_center);
grid.setColProp('AccountId', { editoptions: { value: convertToSelectList(acc_list)} });
grid.trigger('reloadGrid');
if (!isCurrentUserAdmin) {
grid.setCell(rowid, 2, '', { 'visibility': 'visible' });
}
},
onEdit: function (rowid) {
edit_row_id = rowid;
grid.trigger('reloadGrid');
if (grid.getCell(rowid, 'IsPosted') == true) {
var checkAmountInput = '#' + rowid + '_CheckAmount';
$(checkAmountInput).prop("disabled", true);
}
else {
var checkAmountInput = '#' + rowid + '_CheckAmount';
$(checkAmountInput).prop("disabled", false);
}
if (!isCurrentUserAdmin) {
grid.setCell(rowid, 'CenterId', '', { 'visibility': 'hidden' });
}
checklog_id = grid.getCell(rowid, 'CheckLogId');
batch_sql_num = grid.getCell(rowid, 'BatchNumberSequence');
is_posted = grid.getCell(rowid, 'IsPosted');
check_amount_posted = grid.getCell(rowid, 'CheckAmountPosted');
check_amount_refunded = grid.getCell(rowid, 'CheckAmountRefunded');
is_nsed = grid.getCell(rowid, 'IsNSed');
batch_sql_num = batch_sql_num == '' ? '-' : batch_sql_num;
}
}
},
{ name: "CheckLogId", index: "CheckLogId", width: 40, align: "center", editable: false, hidden: true, editrules: { required: true, edithidden: true }, search: false },
{ name: "CenterId", index: "CenterId", width: 200, align: "left", editrules: { required: true },
editable: true,
formatter: 'select',
edittype: 'select',
editoptions: {
value: getSelectList(center_list),
style: 'width:190px',
dataInit: function (elem) {
var center_id = $(elem).val();
if (center_id == '') {
center_id = $("#center_id").val();
}
last_center = center_id;
var list_data = getAccountDBAOnCenter(center_id);
grid.setColProp('AccountId', { editoptions: { value: convertToSelectList(list_data)} });
},
dataEvents: [
{
type: 'change',
fn: function (e) {
resetAccountDBAValues();
var center_id = parseInt($(e.target).val(), 10);
var dba_select_list = getAccountDBAOnCenter(center_id);
var newOptions = '';
$.each(dba_select_list, function (i, dbaRecord) {
newOptions += '<option role="option" value="' +
dbaRecord.AccountId + '">' +
dbaRecord.DBAName + '</option>';
});
if ($(e.target).is('.FormElement')) {
var form = $(e.target).closest('form.FormGrid');
var acccountElm = form.find("select#AccountId.FormElement");
acccountElm.removeAttr("disabled");
acccountElm.html(newOptions);
} else {
var row = $(e.target).closest('tr.jqgrow');
var rowId = row.attr('id');
$("select#" + rowId + "_AccountId", row[0]).html(newOptions);
}
}
}
]
}, search: false
},
{ name: "AccountId", index: "AccountId", width: 200, align: "left", formatter: 'select', editable: true, editrules: { required: true },
edittype: 'select',
editoptions: { value: dba_select_list_json, style: 'width:190px' },
search: true
},
{ name: "CheckNumber", index: "CheckNumber", width: 110, align: "left", editable: true, editrules: { required: true }, edittype: 'text', editoptions: { size: 10, maxlength: 10, style: 'width:90px' }, search: false },
{ name: "ReceivedDate", index: "ReceivedDate", width: 100, align: "center", datefmt: 'm/d/yy', formatter: jsonDateFormatter, editable: true, editrules: { date: false, required: true, custom: true, custom_func: dateValidate }, edittype: 'text', editoptions: { size: 10, maxlength: 10, style: 'width:90px', dataInit: function (element) { $(element).datepicker({ dateFormat: 'm/d/yy', changeYear: true, changeMonth: true }) } }, search: false },
{ name: "CheckAmount", index: "CheckAmount", width: 110, align: "left", formatter: 'currency', editable: true, editrules: { required: true, number: true }, edittype: 'text', editoptions: { size: 10, maxlength: 10, style: 'width:90px' }, formatoptions: { decimalSeparator: ".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$" }, search: false },
{ name: "CheckAmountUnposted", index: "CheckAmountUnposted", width: 120, align: "center", formatter: uPostFormatter, editable: false, editrules: { required: true, edithidden: true }, formatoptions: { decimalSeparator: ".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$" }, search: false },
{ name: "CheckAmountPosted", index: "CheckAmountPosted", width: 120, align: "center", formatter: 'currency', editable: false, editrules: { required: true, edithidden: true }, formatoptions: { decimalSeparator: ".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$" }, search: false },
{ name: "CheckDescription", index: "CheckDescription", width: 180, align: "left", editable: true, editrules: { required: false }, edittype: 'text', editoptions: { size: 100, maxlength: 100, style: 'width:200px' }, search: false },
{ name: "CheckDate", index: "CheckDate", width: 100, align: "center", formatter: jsonDateFormatter, editable: true, editrules: { required: true, custom: true, custom_func: checkValidation }, edittype: 'text', editoptions: { size: 10, maxlength: 10, style: 'width:90px', dataInit: function (element) { $(element).datepicker({ dateFormat: 'm/d/yy', changeYear: true, changeMonth: true }) } } },
{ name: "ReceivedBy", index: "ReceivedBy", width: 120, align: "left", editable: true, editrules: { required: true }, edittype: 'text', editoptions: { size: 15, maxlength: 15, style: 'width:110px' }, search: false },
{ name: "WithdrawnBy", index: "WithdrawnBy", width: 120, align: "left", editable: true, editrules: { required: false }, edittype: 'text', editoptions: { size: 15, maxlength: 15, style: 'width:110px' }, search: false },
{ name: "WithdrawnDate", index: "WithdrawnDate", width: 100, align: "center", datefmt: 'm/d/yy', formatter: jsonDateFormatter, editable: true, editrules: { date: false, required: false, custom: true, custom_func: dateValidate }, edittype: 'text', editoptions: { size: 10, maxlength: 10, style: 'width:90px', dataInit: function (element) { $(element).datepicker({ dateFormat: 'm/d/yy', changeYear: true, changeMonth: true }) } }, search: false },
{ name: "WitnessedBy", index: "WitnessedBy", width: 120, align: "left", editable: true, editrules: { required: false }, edittype: 'text', editoptions: { size: 15, maxlength: 15, style: 'width:110px' }, search: false },
{ name: "IsPosted", index: "IsPosted", width: 75, align: "center", editable: false, formatter: booleanFormatter, unformat: booleanUnFormatter, editrules: { required: true, edithidden: true }, search: false },
{ name: "IsNSed", index: "IsNSed", width: 75, align: "center", editable: false, formatter: booleanFormatter, unformat: booleanUnFormatter, editrules: { required: true, edithidden: true }, search: false },
{ name: "CheckAmountRefunded", index: "CheckAmountRefunded", width: 120, align: "center", formatter: 'currency', editable: false, editrules: { required: true, edithidden: true }, formatoptions: { decimalSeparator: ".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$" }, search: false },
{ name: "BatchNumberSequence", index: "BatchNumberSequence", width: 120, align: "left", editable: false, edittype: 'text', search: false }
],
pager: '#checklog-table-pager',
rowNum: 25,
rowList: [25, 50, 75, 100, 1000000],
gridview: true,
rownumbers: false,
ignoreCase: true,
viewrecords: true,
width: 1040,
height: 400,
autowidth: false,
shrinkToFit: false,
scrolling: true,
loadonce: false,
editurl: '/Payment/SaveChecklog',
loadComplete: loadGridComplete,
ondblClickRow: function (rowid, iRow, iCol, e) {
if (grid.getCell(rowid, 'IsNSed') == false) {
if (showPaymentCallBack) {
showPaymentCallBack(rowid);
}
}
}
}).jqGrid('navGrid', '#checklog-table-pager',
{ add: true, edit: false, del: false },
{},
{
caption: 'Add',
recreateForm: true,
mtype: "post",
width: 520,
addCaption: "Add Check",
reloadAfterSubmit: true,
closeAfterAdd: true,
bSubmit: "Save",
onclickSubmit: beforeAdd,
afterSubmit: addComplete,
beforeShowForm: beforeShowAdd
},
{},
{ multipleSearch: true, overlay: false }
).navButtonAdd("#checklog-table-pager", {
caption: 'Export',
title: 'Export to Excel',
buttonicon: 'ui-icon-extlink',
onClickButton: function () {
var fileName = 'checklog_for_center_' + center_id + '.xls';
var dataUrl = 'PaymentService/GetCheckLog';
var searchParameters = getCheckLogIds();
$("#checklog-table").jqGrid('excelExport', { url: '/Spreadsheet/Index?fileName=' + fileName + '&dataUrl=' + dataUrl + '&filter=' + searchParameters });
}
});
$("#checklog-table-pager table.navtable tbody tr").append(
'<td><div><input type="checkbox" class="searchClosedBox" id="navSearchClosedBox"/>NLO Deal</div></td>');
$(".searchClosedBox").change(function () {
if ($(this).is(':checked')) {
search_closed = true;
var acc_list = getAccountDBAOnCenter($("#center_id").val());
dba_select_list_json = acc_list;
dba_list = acc_list;
grid.setColProp('AccountId', { editoptions: { value: convertToSelectList(acc_list)} });
grid.trigger('reloadGrid');
}
else {
search_closed = false;
var acc_list = getAccountDBAOnCenter($("#center_id").val());
dba_select_list_json = acc_list;
dba_list = acc_list;
grid.setColProp('AccountId', { editoptions: { value: convertToSelectList(acc_list)} });
grid.trigger('reloadGrid');
}
})

//Set the current row to false
grid.editRow(current_row_id, false);
// Set the new row to editable
grid.editRow(new_row_id, true);
..
or on everytime you select a row, you can add a flag.
and then disable all rows with that flag when you click.
$cur_row.on("click", function(){
// Select all rows's with that flag, disable them and remove flag.
// Add Flag Class to this
// Then enable this one only.
}