onSelectRow in a JQGrid - javascript

I have gone through the solutions given for not working onSelectRow but they could not worked for me.
I have following code :
$("#myActions_gridTable").jqGrid({
datatype:'local',
data: myActionsData,
cellsubmit: 'clientArray',
cellEdit: true,
rowNum: noOfLinesToDisplay,
pager: $("#myActions_pager"),
sortname: 'contract_Name',
viewrecords: true,
sortorder: 'asc',
autoWidth:true,
loadonce: true,
cmTemplate: { title: false },
height:'auto',
scrollrows: true,
colNames:["id","Status"],
colModel:[
{
name:'id',index:'id', jsonmap:'id', width:1,hidden:true,key:true, editable:true
},
{name:'status',index:'status', align:'center', sortable: false,
editable: true,
edittype: "select",
width: 150,
editoptions: {
value: "1:Done;2:Running"
}
}
],
onSelectRow : function(id){
console.log('inside onSelectRow');
if (id && id !== lastsel) {
$('#myActions_gridTable').restoreRow(lastsel);
$('#myActions_gridTable').editRow(id, true);
lastsel = id;
}
}
});
Here OnSelectRow does not get fired, no console.log is printed.
Please help.

You need to define the variable lastsel as
var lastsel;
In the above code you need to do :
var lastsel;
$("#myActions_gridTable").jqGrid({
..............
..............
..............,
onSelectRow : function(id){
console.log('inside onSelectRow');
if (id && id !== lastsel) {
$('#myActions_gridTable').restoreRow(lastsel);
$('#myActions_gridTable').editRow(id, true);
lastsel = id;
}
}
Here is the working JsFiddle Demo
And could get further info here http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events.

One possible problem could be the usage of edittype: "select" without usage of formatter: "select". In any way the property editoptions: { value: "1:Done;2:Running" } seems me very suspected if you don't use formatter: "select".
How looks the input data for the column "status"? Do you use 1 and 2 or "Done" and "Running"? If you want to hold 1 and 2 values in the data, but you want to display the values as "Done" and "Running" then you should use
formatter: "select", edittype: "select", editoptions: {value: "1:Done;2:Running"}
The demo demonstrates it. It uses
var myActionsData = [
{ id: 10, status: 1 },
{ id: 20, status: 2 }
];
as the input.
Alternatively one can use
var myActionsData = [
{ id: 10, status: "Done" },
{ id: 20, status: "Running" }
];
but one should use
edittype: "select", editoptions: {value: "Done:Done;Running:Running"}
in the case. No formatter: "select" are required in the last case: see another demo.

OnSelectrow is not working when cellEdit is true.
You can use onCellSelect instead of OnSelectrow.

Related

free-jqGrid (4.15.4), server filter, client sorting and paging?

Attempting to load data from server based off of multisearch/filters, but do sorting and paging on client. i have found a few posts that say to simply set the datatype back to the original value in the beforeSearch method.
i have attempted this and it does execute against the server and return the correct data. However, the second time i filter it seems to get the data from the server but then it gets wiped out on line 4429 in the jqgrid code shown below. Any idea on how to achieve this goal?
Ln 4429 : p.lastSelectedData = query.select();
grid definition:
$element
.jqGrid({
cmTemplate: { search: true, searchoptions: { attr: { placeholder: "filter..." }, clearSearch: true }, sortable: true, align: "center" },
colModel: [
{ name: "Id", key: true, hidden: true, searchoptions: { searchhidden: true, sopt: ["eq"] } },
{ name: "TransmissionId", label: "Transmission Id", searchoptions: { sopt: ["eq"] } },
{ name: "Name", label: "Name", searchoptions: { sopt: ["cn"] } }
],
datatype: "json",
loadonce: true,
height: "auto",
ignoreCase: true,
pager: $("#" + pagerId),
pgbuttons: true,
pginput: false,
rowList: [10, 25, 50],
rowNum: 10,
toppager: true,
url: "url here",
loadComplete: function (data) {
if (this.p.datatype === "json") {
setTimeout(function () {
$element.trigger("reloadGrid", [{ page: 1 }]);
}, 50);
}
return data;
},
viewrecords: true
})
.jqGrid("filterToolbar", {
autosearch: true,
defaultSearch: "cn",
beforeSearch: function () {
$element.setGridParam({ datatype: "json", page: 1 });
}
})
.jqGrid("navGrid", "#" + pagerId, {
edit: false,
add: false,
del: false,
refresh: false,
view: false,
cloneToTop: true
});
I have trimmed down the grid to try to verify it is not custom logic that is causing this issue. the grid does have multipleSearch on. but is not defined above.
If I understand correctly your question then you should use forceClientSorting: true in combination with loadonce: true. It force that the data loaded from the server will be sorted, filtered and paged locally directly after loading from the server. Thus you can remove loadComplete, which you use currently. See the answer for a demo.
Additionally, you can add searching property, where you include all options of filterToolbar and searchGrid:
searching: {
autosearch: true,
defaultSearch: "cn",
beforeSearch: function () {
var p = $(this).jqGrid("getGridParam"), // get reference to all parameters
filters = JSON.parse(p.postData.filters);
p.datatype = "json";
// one can here analyse filters, modify it or clear it as
p.postData.filters = "";
// one can set any other parameters, which will be sent to the server
// by using p.postData.param1 = "value1";
// which will sent param1=value1 to the server.
}
}
In general you can do the same inside your current beforeSearch too.
UPDATED: Probably you should use beforeProcessing callback additionally. beforeProcessing will be called directly after receiving the data from the server. Inside of the callback you can clean-up all p.postData.filters (to "") and p.search (change it from true to false). As the result jqGrid will not try to filter locally by postData.filters the data returned from the server.

Free jqGrid, don't send new index on addrow with inlineNav

Just putting in a new grid, and everything seems to be working well, except for one thing. Using basic inline, it is sending a new incorrect key value for the column I have set with key: true. This is an auto-increment column in the database, so I just don't want to send any data for this column when ADDING, only for edit or delete is that required.
It is posting a parameter: row_id => jqg3 for the new key column and messing up my server script. So because adding the new row will auto-increment the row_id col, I don't need to send this.
How do I stop the jqGrid from sending this (row_id) index column value when saving a new added row?
free-jqgrid version is 4.14.0
$('#accts').jqGrid({
url:'/phpAJAX/Master/master_grid_v1.php',
editurl:'/phpAJAX/Master/master_grid_v1.php',
height: 'auto',
shrinkToFit: false,
width: 'auto',
datatype: 'xml',
mtype: 'POST',
postData:{
'arg1':'bol_acct'
},
colNames:[
'row_id',
'Customer',
'Trucker',
'Acct Num'
],
colModel:[
{name: 'row_id', hidden: true, key: true},
{name:'Customer', align: "center", editable: true},
{name: 'Trucker', align: "center"},
{name: 'Acct_Num', align: "center"}
],
sortname: 'Customer',
sortorder: 'desc',
viewrecords: true,
gridview: true,
caption: 'Bill of Lading Accounts',
rowNum: 10000,
pager:true
}).jqGrid('inlineNav', {
addParams: {
addRowParams: { extraparam: {'arg1':'bol_acct', 'oper':'add'} }
},
editParams: {
extraparam: {
'arg1':'bol_acct', 'oper':'edit'
}
}
})
One can use serializeSaveData callback of inline editing to modify the data, which will be send during inline editing. You can add serializeSaveData callback via
inlineEditing: {
keys: true,
extraparam: { arg1: "bol_acct" },
serializeSaveData: function (postData) {
var newPostData = $.extend(true, {}, postData);
if (newPostData.oper === "add") {
delete newPostData.id; // delete id parameter
}
return newPostData;
}
}

Enabling Save button on JQ Grid with InlineEditing and CellEdit

Hi I have a Grid that is using cell edit and Inline editing. It saves to the ClientArray
$('#list').jqGrid({
datatype: "local",
colNames: ["Parameter Id", "Parameter Name", 'Parameter Value'],
colModel: [
{ name: "Id", index: "Id", align: "left", key: true, editable: false,hidden:true, jmap: 0 },
{ name: "ParameterName", index: "ParameterName", align: "left", editable: false, jmap: 1 },
{ name: "ParameterValue", index: "ParameterValue", align: "left", editable: true, edittype: "text", editoptions: { maxlength: 100 }, editrules: {required: true }, jmap: 2 }
],
pager: "#pager",
rowNum: 100,
rowList: [],
pgbuttons: false, // disable page control like next, back button
pgtext: null, // disable pager text like 'Page 0 of 10'
viewrecords: true, // disable current view record text like 'View 1-10 of 100'
height: '100%',
scrollOffset: 0,
sortname: "Name",
sortorder: "Asc",
gridview: true,
caption: 'Parameters',
autowidth: true,
hidegrid: false,
loadonce: true,
//beforeEditCell: function () {
// $("#list_ilsave").removeClass('ui-state-disabled');
// return;
//},
//afterEditCell: function (rowid, cellname, value, iRow, iCol) {
// $('#list').jqGrid('getCell', rowid, iCol).focus();
// return;
//},
width: totalWidth,
cellEdit: true,
cellsubmit: "clientArray"
});
$('#list').jqGrid('inlineNav', '#pager', {
edit: false,
add: false,
del: false,
save: true,
savetext: 'Save',
cancel: false
});
When I edit a Cell the save button remains disabled. If I manually Enable the button in beforeCellEdit, the editable cell hasn't got focus until you select another cell. This behavior is only happening in IE.
I have tried to fix both these issues individually in my commented out code, and I have found that the loss of focus is caused by the line
$("#list_ilsave").removeClass('ui-state-disabled');
I tried placing this line in beforeEditCell and in afterEditCell and it causes the input field to loose focus.
I was using JQ Grid 4.4.4 and I have tried updating to 4.6.0 after I read there were updates to Inline Editing after 4.4.4
UPDATE
I have changed my grid to use onSelectRow
onSelectRow: function (rowid) {
var $grid = $('#list');
var iRow = $("#" + rowid)[0].rowIndex;
$grid.jqGrid('editRow', rowid, {
keys: true,
oneditfunc: function(rowid, response) {
var $saveButton = $("#list_ilsave");
if ($saveButton.hasClass('ui-state-disabled')) {
$saveButton.removeClass('ui-state-disabled');
}
markCellAsDirty(rowid, $grid);
return true;
},
successfunc: function() {
alert('success');
return true;
},
aftersavefunc: function() {
alert('after save');
return true;
},
errorfunc: function() {
alert('error');
return true;
}
});
},
cellsubmit: "clientArray"
But I can't get any of the editRow events to fire other than oneditfunc. I also have an issue with getting the changed cells.
This method marks the cells as dirty / edited
function markCellAsDirty(rowid, grid) {
$(grid.jqGrid("setCell", rowid, "ParameterValue", "", "dirty-cell"));
$(grid[0].rows.namedItem(rowid)).addClass("edited");
}
I try to get the edited cells as follows
var editedRows = $grid.getChangedCells('dirty');
Before posting editedRows in an AJAX method to my server.
I'm not sure what you want to implement exactly, but I modified your demo to the following https://jsfiddle.net/OlegKi/byygepy3/11/. I include the full JavaScript code of the demo below
$(function () {
var myData = [
{ id: 10, ParameterName: "Test", ParameterValue: "" },
{ id: 20, ParameterName: "Test 1", ParameterValue: "" },
{ id: 30, ParameterName: "Test 2", ParameterValue: "" }
],
$grid = $("#list");
// change the text displayed on editrules: {required: true }
$.extend(true, $.jgrid.locales["en-US"].edit.msg, {
required: "No value was entered for this parameter!!!"
});
$grid.jqGrid({
datatype: "local",
data: myData,
colNames: ["", "Parameter Name", "Parameter Value"],
colModel: [
{ name: "act", template: "actions" }, // optional feature
{ name: "ParameterName" },
{ name: "ParameterValue", editable: true,
editoptions: { maxlength: 100 }, editrules: {required: true } }
],
cmTemplate: { autoResizable: true },
autoResizing: { compact: true },
pager: true,
pgbuttons: false, // disable page control like next, back button
pgtext: null, // disable pager text like 'Page 0 of 10'
viewrecords: true, // disable current view record text like 'View 1-10 of 100'
sortname: "Name",
iconSet: "fontAwesome",
caption: 'Parameters',
autowidth: true,
hidegrid: false,
inlineEditing: {
keys: true
},
singleSelectClickMode: "selectonly", // prevent unselect once selected rows
beforeSelectRow: function (rowid) {
var $self = $(this), i,
// savedRows array is not empty if some row is in inline editing mode
savedRows = $self.jqGrid("getGridParam", "savedRow");
for (i = 0; i < savedRows.length; i++) {
if (savedRows[i].id !== rowid) {
// save currently editing row
// one can replace saveRow to restoreRow in the next line
$self.jqGrid("saveRow", savedRows[i].id);
}
}
return savedRows.length === 0; // allow selection if saving successful
},
onSelectRow: function (rowid) {
$(this).jqGrid("editRow", rowid);
},
afterSetRow: function (options) {
var item = $(this).jqGrid("getLocalRow", options.rowid);
if (item != null) {
item.dirty = true;
}
},
navOptions: {
edit: false,
add: false,
search: false,
deltext: "Delete",
refreshtext: "Refresh"
},
inlineNavOptions: {
save: true,
savetext: "Save",
cancel: false,
restoreAfterSelect: false
},
formDeleting: {
// delete options
url: window.g_baseUrl + 'MfgTransactions_MVC/COA/Delete?',
beforeSubmit: function () {
// get value
var selRowId = $(this).jqGrid('getGridParam', 'selrow');
var parametricValue = $(this).jqGrid('getCell', selRowId, 'ParameterValue');
// check if empty
if (parametricValue === "") {
return [false, "Cannot delete: No value exists for this parameter"];
}
return [true, "Successfully deleted"];
},
delData: {
batchId: function () {
return $("#BatchId").val();
}
},
closeOnEscape: true,
closeAfterDelete: true,
width: 400,
msg: "Are you sure you want to delete the Parameter?",
afterComplete: function (response) {
if (response.responseText) {
alert("response.responseText");
}
//loadBatchListIntoGrid();
}
}
}).jqGrid('navGrid')
.jqGrid('inlineNav')
.jqGrid('navButtonAdd', {
caption: "Save Changed",
buttonicon: "fa-floppy-o",
onClickButton: function () {
var localData = $(this).jqGrid("getGridParam", "data"),
dirtyData = $.grep(localData, function (item) {
return item.dirty;
});
alert(dirtyData.length > 0 ? JSON.stringify(dirtyData) : "no dirty data");
}
});
// make more place for navigator buttons be rwducing the width of the right part
var pagerIdSelector = $grid.jqGrid("getGridParam", "pager");
$(pagerIdSelector + "_right").width(100);
// make the grid responsive
$(window).bind("resize", function () {
$grid.jqGrid("setGridWidth", $grid.closest(".container-fluid").width());
}).triggerHandler("resize");
});
where HTML code is
<div class="container-fluid">
<div class="row">
<div id="gridarea" class="col-md-6 col-md-offset-3">
<table id="list"></table>
</div>
</div>
</div>
and CSS code
.ui-th-column>div, .ui-jqgrid-btable .jqgrow>td {
word-wrap: break-word; /* IE 5.5+ and CSS3 */
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
overflow: hidden;
vertical-align: middle;
}
It demonstrate how one can implement starting inline editing on select row. Additionally I added optional column with template: "actions" which can be alternative implementation. I set property dirty in every item of data inside of afterSetRow callback and I added "Save Changed" button, which uses localData = $(this).jqGrid("getGridParam", "data") and dirtyData = $.grep(localData, function (item) { return item.dirty; }); to get the dirty (modified) data.

Inline edit focus is not un-focusing after saving

I am using jqgrid in my application. We have functionality to do inline editing and saving.Now editing is working fine but the problem is with focus. When i click on edit button all cells are focused as expected and later i perform modifications and save, now focus from that row won't go off.
Code what I have tried is:
col name and col model code:
colNames: ['Id','Category Name','Category Label','Sort Order','Default','Active','Action'],
colModel: [
{name:'id', hidden : true, key : true},
{name:'CategoryName',index:'1',sortable:false, width: 343, editable: true,
editoptions:{size:"40",maxlength:"40"}
},
{name:'CatLable', index:'2',width:250, editable: true,edittype:"select",
editoptions:{value:"#{contexts.sessionContext.get('categoryLabel')}"}
},
{name:'DispOrder',index:'3',sortable:false, width: 100, align:"center", editable: true, editrules:{number:true},
editoptions:{size:"3",maxlength:"3"}
},
{name:'IsDefault',index:'4',sortable:false,width:60,search:false, resizable: false},
{name:'IsActive',index:'5',sortable:false,width:60,search:false, resizable: false},
{name: 'Action', index: '6', width: 85, sortable: false, formatter: 'actions',
}
}
],
format options code:
{name: 'Action', index: '6', width: 85, sortable: false, formatter: 'actions', formatoptions: {
// we want use [Enter] key to save the row and [Esc] to cancel editing.
url: "#myurl",
keys: true,
"delbutton":false,
onEdit:function(rowid) {
lastsel2 = rowid;
}
}
}
Reload grid code:
gridComplete: function(){
unblockB2BUI();
var recs = parseInt(jQuery("#categoryResults").getGridParam("records"),10);
if (recs == 0) {
jQuery("#logGridWrapper").hide();
jQuery(".noResMsg").show();
}
else {
jQuery(".noResMsg").hide();
jQuery('#logGridWrapper').show();
}
}
Grid for editing:
Grid when try to save the edited values:
Update:
Grid after saving and going to edit one more row:
Someone please suggest me how can I come out of the focus when i click on save icon.
Thanks in advance.

jqGrid - aftersavefunc being called before saveRow

I have a jqGrid that allows inline editing/adding of data. When a user double clicks on the row, inline edit starts. When the user presses enter or clicks on another row, I want the changes to be saved. For some reason, however, the row is being restored before the saveRow function is being called and my edits are not saved (the AJAX call never happens).
My code is shown below. When I press the enter key, my changes are saved and sent to the server. When I click on another row, my changes are not sent to the server (no AJAX call) and I see in the console that afterrestorefunc is called before the saveEdit.
var editParams = {
afterSubmit: processResponse,
successfunc: function(response) {
var processed = processResponse(response);
if(processed[0] !== true) {
$.jgrid.info_dialog($.jgrid.errors.errcap, processed[1], $.jgrid.edit.bClose);
}
return processed[0];
},
afterrestorefunc: function(id) {
console.log('afterrestorefunc - ' + id);
},
bottominfo: 'Fields marked with an (*) are required',
keys: true
},
zipEditParams = $.extend(true, {}, editParams, {url: 'editdata.php'});
/* Set global default options */
$.extend($.jgrid.defaults, {
grouping: true,
shrinkToFit: false,
rowList: [10, 20, 30, 40, 50, 100],
rowNum: 20,
repeatitems: false,
ondblClickRow: inlineEdit,
onSelectRow: saveEdit
});
$('#zipcodes')
.jqGrid({
datatype: 'json',
colNames: ['Zip', 'City', 'State', 'Country'],
colModel: [
{name: 'zip_zip', jsonmap: 'zip_zip', width: 75, editable: true, editrules: {required: true}, formoptions: {elmprefix: '(*) '}},
{name: 'zip_city', jsonmap: 'zip_city', width: 75, editable: true, editrules: {required: true}, formoptions: {elmprefix: '(*) '}},
{name: 'zip_state', jsonmap: 'zip_state', width: 75, editable: true, editrules: {required: true}, formoptions: {elmprefix: '(*) '}},
{name: 'zip_country', jsonmap: 'zip_country', width: 75, editable: true, editrules: {required: true}, formoptions: {elmprefix: '(*) '}}
],
height: 200,
ignoreCase: true,
jsonReader: { repeatitems: false, id: 'zip_zip' },
pager: '#zipcodes_pager',
url: 'data.php',
editurl: 'editdata.php'
})
.jqGrid('navGrid', '#zipcodes_pager', {add: false, edit: false, del: false, refresh: false, search: false})
.jqGrid('inlineNav', '#zipcodes_pager', {edit: true, save: true, cancel: false, editParams: zipEditParams});
var lastSel;
/* Start editing the row */
function inlineEdit(id, iRow, iCol) {
var editParams = this.id == 'zipcodes' ? zipEditParams : (this.id == 'labels' ? labelEditParams : (this.id == 'users' ? userEditParams : {}));
$(this).jqGrid('editRow', id, editParams);
focusRow(id, iCol, this);
}
function focusRow(id, iCol, table) {
var ele = document.getElementById(id + '_' + table.p.colModel[iCol].name),
length = ele.value.length;
ele.focus();
if(ele.setSelectionRange) { //IE
ele.setSelectionRange(length, length);
}
else if(ele.createTextRange) {
var range = ele.createTextRange();
range.collapse(true);
range.moveEnd('character', length);
range.moveStart('character', start);
range.select();
}
}
function saveEdit(id) {
if(id && id != lastSel) {
console.log('saveRow: ' + this.id + ' - ' + lastSel);
/* Save the last selected row before changing it */
var saveParams = zipEditParams;
$(this).jqGrid('saveRow', lastSel, saveParams);
lastSel = id;
}
}
function processResponse(response) {
console.log('processResponse');
var obj = $.parseJSON(response.responseText),
retVal = true,
message = '',
new_id = '';
if(obj.message) {
if(obj.message == 'not logged in') {
location.href = 'logout.php';
}
else if(obj.message != 'true') {
message = obj.message;
retVal = false;
}
}
return [retVal, message, new_id];
}
Any help with this problem is greatly appreciated.
UPDATE It seems that if I comment out .jqGrid('inlineNav', '#zipcodes_pager', {edit: true, save: true, cancel: false, editParams: zipEditParams});, then everything works as expected. I also tried just using .jqGrid('inlineNav', '#zipcodes_pager');, but saw the same results. This is nice and could work in the short term, but I still would like the functionality of inline adding if possible.
i think you need to add more functionality to your onSelectRow function
onSelectRow: function (id) {
if (id && id !== lastsel) {
// cancel editing of the previous selected row if it was in editing state.
// jqGrid hold intern savedRow array inside of jqGrid object,
// so it is safe to call restoreRow method with any id parameter
// if jqGrid not in editing state
if (typeof lastsel !== "undefined") {
jQuery("#grid").jqGrid('restoreRow', lastsel);
}
lastSel = id;
}
},
in this code i'm not doing editing on selecting the row, but you can see that you need to restore the previous selected row, if that row was in edit mode and you click on some other row.
Try this.

Categories