Related
I am using Free jqGrid 4.15.0, I have three checkbox columns populated by three bools. Using the filter toolbar the "All" choice works, the "True" choice works, but the "False" choice never matches anything. I tried converting the bools to ints (0, 1) and setting the searchoptions accordingly, but until I converted the bools/ints to strings ("true", "false") and filtered on the strings, I could never get the "False" choice in the filter to work.
The checkboxes fill successfully, it's just the filtering that does not work.
This screen worked fine using a prior version of jqGrid (4.5.2).
Does anyone have any ideas what the issue is? Let me know if there is anything else you need to see.
My class which is JSON'd and delivered to the grid:
public class DelForDetails
{
public long ScheduleId { get; set; }
public DateTime? ShipmentDate { get; set; }
public string PurchaseOrderNumber { get; set; }
public string ProductNumber { get; set; }
public string ScheduleIdentifier { get; set; }
public Decimal? ShipmentQuantity { get; set; }
public string CommitmentLevel { get; set; }
public string ConsumerName { get; set; }
public string ShipToFacilityNumber { get; set; }
public bool Shipped { get; set; }
public bool ExportFlag { get; set; }
public bool MissingDateFlag { get; set; }
public string StatusForSchedule { get; set; }
}
The grid:
$('#scheduleGrid').jqGrid({
url: url,
datatype: 'json',
mtype: 'GET',
colModel: [
{ name: 'ScheduleId', label: $('#ScheduleIdHeaderText').text(), width: 100, hidden: true, editable: true },
{
name: 'ShipmentDate', label: $('#ShipmentDate').text(), width: 100, align: 'center', editable: true,
formatter: stdDateFormatter, stype: 'text'
},
{ name: 'PurchaseOrderNumber', label: $('#PurchaseOrderNumber').text(), width: 150, align: 'left', editable: true },
{ name: 'ProductNumber', label: $('#ProductNumber').text(), width: 100, align: 'left', editable: false },
{ name: 'ScheduleIdentifier', label: $('#ScheduleIdentifierHeaderText').text(), width: 150, align: 'right', hidden: false },
{
name: 'ShipmentQuantity', label: $('#ShipmentQuantity').text(), width: 80, align: 'center', hidden: false, formatter: 'number',
formatoptions: { decimalPlaces: 4, thousandsSeparator: '' }
},
{ name: 'CommitmentLevel', label: $('#CommittmentLevelHeaderText').text(), width: 80, align: 'left', hidden: false },
{ name: 'ConsumerName', label: $('#CustomerName').text(), width: 150, align: 'left', hidden: false },
{ name: 'ShipToFacilityNumber', label: $('#ShipToCode').text(), width: 100, align: 'center', hidden: false },
{
name: 'Shipped', label: $('#ShippedHeaderText').text(), width: 80, align: 'center', hidden: false, formatter: 'checkbox',
stype: 'select', searchoptions: { sopt: ['eq', 'ne'], value: ':All;true:True;false:False' }
},
{
name: 'ExportFlag', label: $('#ExportFlagHeaderText').text(), width: 80, align: 'center', hidden: false, formatter: 'checkbox',
stype: 'select', searchoptions: { sopt: ['eq', 'ne'], value: ':All;true:True;false:False' }
},
{
name: 'MissingDateFlag', label: $('#MissingDateFlagHeaderText').text(), width: 80, align: 'center', hidden: false, formatter: 'checkbox',
stype: 'select', searchoptions: { sopt: ['eq', 'ne'], value: ':All;true:True;false:False' }
}
],
jsonReader: {
repeatitems: false,
id: 'ScheduleId'
},
pager: '#schedulePager',
altRows: true,
altclass: 'harmony-schedule-grid-altrow-class',
ignoreCase: true,
multiselect: true,
cellEdit: false,
rowNum: 15,
rowList: [15, 30, 50],
loadonce: true,
loadui: 'disable',
sortable: true,
sortname: 'ShipmentDate',
sortorder: 'asc',
viewrecords: true,
gridview: true,
autoencode: true,
height: 'auto',
autowidth: true,
subGrid: true,
loadComplete: function () {
$('#LoadingPanel').hide();
$('td[aria-describedby="scheduleGrid_subgrid"]').addClass('harmony-schedule-background-color');
$('td[aria-describedby="scheduleGrid_cb"]').addClass('harmony-schedule-background-color');
},
subGridRowExpanded: function (subgrid_id, row_id) {
...
}
})
.navGrid('#schedulePager', { del: false, add: false, edit: false, search: false })
.navButtonAdd('#schedulePager', { } })
.filterToolbar({ stringResult: true, searchOnEnter: false, autosearchDelay: 1000, defaultSearch: 'cn' });
View of checkboxes
If I correctly understand the problem, then you should add
sorttype: "boolean"
property in the column, which data should be interpreted as Boolean. It should fix your problem.
Alternatively you can consider to change
stype: 'select',
searchoptions: {
sopt: ['eq', 'ne'],
value: ':All;true:True;false:False'
}
to
sorttype: "boolean",
stype: "checkbox",
searchoptions: {
sopt: ["eq"],
value: "true:false"
}
to use stype: "checkbox" instead of stype: "select". You can use short form of the column declaration: template: "booleanCheckbox". It allows to simplify the definition of columns Shipped and ExportFlag from
{
name: 'Shipped', label: $('#ShippedHeaderText').text(), width: 80, align: 'center', hidden: false, formatter: 'checkbox',
stype: 'select', searchoptions: { sopt: ['eq', 'ne'], value: ':All;true:True;false:False' }
},
{
name: 'ExportFlag', label: $('#ExportFlagHeaderText').text(), width: 80, align: 'center', hidden: false, formatter: 'checkbox',
stype: 'select', searchoptions: { sopt: ['eq', 'ne'], value: ':All;true:True;false:False' }
}
to
{
name: 'Shipped', label: $('#ShippedHeaderText').text(), width: 80,
template: "booleanCheckbox"
},
{
name: 'ExportFlag', label: $('#ExportFlagHeaderText').text(), width: 80,
template: "booleanCheckbox"
}
I personally mostly add firstsortorder: "desc" property to template: "booleanCheckbox" to search for true on the first click on the tree-state checkbox created by stype: "checkbox".
How to drag the column value of jqgrid to another like dragging in excel?
Can it be resolved?
Below is my jgrid code :
$(document).ready(function () {
$('#form_table').jqGrid('setCell', 2, 'column Name', '', {color: 'red'});
jQuery("#form_table").jqGrid({
datatype: "local",
mtype: "POST",
url: '',
colNames: ['Id', 'तालीममा सहभागीको नाम थर', 'जिल्ला', 'गा.वि.स', 'वडा नं', 'जातजाती', 'लिङ्ग', 'उमेर'],
colModel: [
{name: 'id', index: 'id', jsonmap: "id", hidden: true, },
{name: 'name', index: 'name', jsonmap: "name", width: 250, editable: true},
{name: 'district', index: 'district', jsonmap: "district", width: 100, editable: true, align: 'center', edittype: 'select', editoptions: {
value: {"":"",<?php
foreach ($districts as $district) {
echo "'" . $district->dis_nepali . "': '" . $district->dis_nepali . "', ";
}
?>
}, defaultValue: ''}, formatter: 'select'},
{name: 'vdc', index: 'vdc', jsonmap: "vdc", width: 100, editable: true},
{name: 'ward_no', index: 'ward_no', jsonmap: "ward_no", width: 80, editable: true},
{name: 'caste', index: 'caste', jsonmap: "caste", width: 100, editable: true, align: "center", edittype: 'select', editoptions: {value: {"दलीत": "दलीत","आ/जनजाती": "आ/जनजाती", "बा छ्य": "बा छ्य", "मधेसी": "मधेसी", "अन्य": "अन्य","":""}, defaultValue: ''}, formatter: "select"},
{name: 'gender', index: 'gender', jsonmap: "gender", width: 100, editable: true, align: "center", edittype: 'select', editoptions: {value: {"महिला": "महिला", "पूरूष": "पूरूष","":""}}, formatter: "select"},
{name: 'age_group', index: 'age_group', jsonmap: "age_group", width: 100, editable: true,}
],
loadComplete: function (data) {
var grid = jQuery("#form_table"),
pageSize = parseInt(grid.jqGrid("getGridParam", "rowNum")),
emptyRows = pageSize - data.rows.length;
if (data.rows.length == 0) {
for (var j = 1; j <= emptyRows; j++)
// Send rowId as undefined to force jqGrid to generate random rowId
grid.jqGrid('addRowData', undefined, {});
}
if (emptyRows > 0) {
for (var i = 1; i <= emptyRows; i++)
// Send rowId as undefined to force jqGrid to generate random rowId
grid.jqGrid('addRowData', undefined, {});
}
},
jsonreader: {repeatitems: false, id: 'id', root: 'root'},
pager: '#form_pager',
rowNum: 10,
toppager: true, //for pager on top
height: "auto",
rowList: [10, 20, 50, 100],
// sortname: 'id',
viewrecords: true,
gridview: true,
resizable: true,
rownumbers: true,
loadonce: true,
//shrinkToFit:false,
loadtext: 'Loading...',
cellEdit: true,
contentType: "application/json",
cellsubmit: 'clientArray',
cellurl: ""
});
jQuery("#form_table").jqGrid('navGrid', '#form_pager', {
cloneToTop: true,
edit: false,
add: false,
del: false
});
jQuery("#form_table").jqGrid('setGroupHeaders', {
useColSpanStyle: true,
groupHeaders: [
{startColumnName: 'district', numberOfColumns: 3, titleText: 'ठेगाना'}
]
});
}):
Now i want the column 2 name of row 1 to be dragged to the column 2 name upto row 15 is there any solution?
Any help would be highly appreciated. Thank You
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 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>
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.
}