getLocalRow gives wrong data after deleting row - jqgrid

I am using jqgrid version 4.6.0
I started using getLocalRow in jqGrid after I asked a question in
This Question
Here is a sample code I prepared When some one clicks a button I delete row2 but when I do ('getLocalRow', 2) it gives me row 3 ? Isn't the rowId param in getLocalRow the rowID of the grid which is the key? getRowData works as expected but I don't want to use that because It gives me everything as a string as noted in This Question and answered in This Answer
Here is the jsFiddle sample to test.
deleteRow = function()
{
$("#list").jqGrid('delRowData', 2);
var row2 = $("#list").jqGrid('getLocalRow', 2);
var row3 = $("#list").jqGrid('getLocalRow', 3);
var row2Corrent = $("#list").jqGrid('getRowData', 2); // Empty
var row3correct = $("#list").jqGrid('getRowData', 3);// gives {id:3, DocGroupName: "name3", DocList: "list3", Mandatory: "No"},
}
"use strict";
var mydata = [
{id:1, DocGroupName: "name1", DocList: "list1", Mandatory: "Yes"},
{id:2, DocGroupName: "name2", DocList: "list2", Mandatory: "No"},
{id:3, DocGroupName: "name3", DocList: "list3", Mandatory: "No"},
{id:4, DocGroupName: "name4", DocList: "list4", Mandatory: "Yes"},
];
$("#list").jqGrid({
//url:'php.scripts/customers.get.php',
//datatype: 'xml',
//mtype: 'POST',
datatype: "local",
data: mydata,
height: "auto",
colNames: ['id', 'Document Group Name','Document Name','No of Mandatory'],
colModel :[
{name:'id',key:true, index:'id', width:55},
{name:'DocGroupName', index:'DocGroupName', width:90, editable: true,edittype: 'select',
},
{name:'DocList', index:'DocList', width:90, editable: true },
{name:'Mandatory', index:'Mandatory', width:90, editable: true}
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'idcustomers',
sortorder: 'asc',
viewrecords: true,
gridview: true,
caption: 'Customers',
cellEdit: true,
cellsubmit: 'clientArray',
afterSaveCell: function(rowid,name,val,iRow,iCol) {
if(name=='DocGroupName')
{
var row = $('#list').jqGrid('getRowData',currentRow);
row.DocList='';
var row = $('#list').jqGrid('setRowData',currentRow,row);
}
},
beforeSaveCell: function(rowid,name,val,iRow,iCol) {
// var row = $("#list").getRowData(rowid);
var row = $('#list').jqGrid('getRowData',rowid);
currentRow= rowid;
},
});

The only solution I found to the problem is to use
getRowData(rowId);
Since getrowdata gives everything as a string I was required to do some data conversions for example
var intValue= parseInt(intField);
When I wanted the id from string or
var trueFalse= parseBool(boolField);
function parseBool(val) {
return val === true || val === "true"
}
When I wanted boolean from string.
It is a bit of extra work but that is the only option I am left of.

Related

ReSetting the grid data on LoadComplete

I have a jqgrid and I want to reset the grid data when it is ready.I have a reason for doing this. My actual problem is complicated but here is a simple demo I created.
Here is a demo I created but the issue is that setting data on loadcomplete does not seem to show the data in the grid. The grid is just empty.
var mydata =
[
{id:"1", DocGroupName: "x", DocList: "y", Mandatory: "z"}
];
var mydata2 = [
{id:"2", DocGroupName: "yy", DocList: "rr", Mandatory: "gg"},
{id:"3", DocGroupName: "zz", DocList: "rr", Mandatory: "gg"}
];
$("#list").jqGrid({
datatype: "local",
data: mydata,
height: "auto",
colNames: ['id', 'Document Group Name','Document Name','No of Mandatory'],
colModel :[
{name:'id', index:'id', width:55},
{name:'DocGroupName', index:'DocGroupName', width:90, editable: true},
{name:'DocList', index:'DocList', width:90, editable: true },
{name:'Mandatory', index:'Mandatory', width:90, editable: true}
],
loadComplete: function(data)
{
$('#list').jqGrid('clearGridData').jqGrid('setGridParam', {
data: mydata
}).trigger('reloadGrid', [{ page: 1 }]);
},
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'idcustomers',
sortorder: 'asc',
viewrecords: true,
gridview: true,
caption: 'Customers',
cellEdit: true,
cellsubmit: 'clientArray'
});

Prevent RowIds from resetting on sorting, paging or deleting rows

I am using jqGrid version 4.6.0
My question is the same as
This Question.
The solution accepted there is to use primary key but I don't have primary key for my rows. Is there a way to force jqgrid to have unique row Ids upon sorting, changing pages Or deleting rows ?
The issue I have is if I delete a say row 2 from a grids with 5 rows the rowid for 3 is set to 2, row4 to 3...etc. I want my rows to be unique Ids and I want that to be generated in the client side
For more info: My grid is client side paged and sorted.
Here is a JsFiddle link to the sample data of my grid.
testRow = function()
{
var row2correct = $("#list").jqGrid('getRowData', 2);// {meterid:2, DocGroupName: "name2", DocList: "list2", Mandatory: "No"};
var row6wong = $("#list").jqGrid('getRowData', 6);// is empty but i was expecting {meterid:4, DocGroupName: "name6", DocList: "ggg", Mandatory: "Yes"}
}
var mydata = [
{meterid:1 , metername: "name1", DocList: "list1", Mandatory: "Yes"},
{meterid:2, metername: "name2", DocList: "list2", Mandatory: "No"},
{meterid:1, metername: "name3", DocList: "list3", Mandatory: "No"},
{meterid:3, metername: "name4", DocList: "list4", Mandatory: "Yes"},
{meterid:4, metername: "name5", DocList: "list5", Mandatory: "Yes"},
{meterid:4, metername: "name6", DocList: "ggg", Mandatory: "Yes"},
];
$("#list").jqGrid({
datatype: "local",
data: mydata,
height: "auto",
colNames: ['Meterid', 'metername','Document Name','No of Mandatory'],
colModel :[
{name:'meterid', index:'meterid', width:55},
{name:'metername', index:'metername', width:90},
{name:'DocList', index:'DocList', width:90, editable: true }, {name:'Mandatory', index:'Mandatory', width:90, editable: true}
],
pager: '#pager',
rowNum:4,
rowList:[4,8,30],
sortorder: 'asc',
viewrecords: true,
gridview: true
});
You can add
var i, l = mydata.length, item;
for (i = 0; i < l; i++) {
item = mydata[i];
item.id = String(item.meterid) + "_" + item.metername;
}
before usage of mydata as the value of data parameter. It should fix your main problem. If you load the data from the server then you can assign id on the server side or to use beforeProcessing callback to modified the data returned from the server before the data will be processed by jqGrid.

jqgrid save previous row onSelectRow not working

I'm using jqgrid 4.8.2. If a user clicks on a row, I want to save the previously selected row and display the current row in edit mode. I've used the code from previous answers but can't get this functionality to work. After some debugging and looking through the source code for jqgrid, it appears saveRow does not fire because the 'editable' attribute for the previous row is immediately set to 0. There is a clause in the jqgrid source code that looks for this attribute before saving the row:
editable = $(ind).attr("editable");
o.url = o.url || $t.p.editurl;
if (editable==="1") {....saveRow occurs...}
Any suggestion on how to work around this?
var editingRowId;
var myEditParam = {
keys: true,
extraparam: {activityID: aID},
oneditfunc: function (id) { editingRowId = id; },
afterrestorefunc: function (id) { editingRowId = undefined; },
aftersavefunc: function (id) { editingRowId = undefined; }
};
var myGrid = jQuery("#spend_grid").jqGrid({
url: parentGridURL,
mtype: "POST",
datatype: "json",
postData: {filters: myFilters},
gridview: false, //added for IE
altRows: true,
emptyrecords: 'NO PAYMENTS FOUND',
editurl: savePaymentURL,
onSelectRow: function (id) {
console.log('id=' + id + ' editingRowId =' + editingRowId);
var $this = $(this);
if (editingRowId !== id) {
if (editingRowId) {
// save or restore currently editing row
console.log('should be saving ' + editingRowId);
$this.jqGrid('saveRow', editingRowId, myEditParam);
console.log('done saving');
}
$this.jqGrid("editRow", id, myEditParam);
}
},
search: true,
sortname: lastSortName,
sortorder: lastSortOrder,
page: lastPage,
pager: jQuery('#report_pager'),
rowNum: lastRowNum,
rowList: [10,20,50,100],
viewrecords: true,
clearSearch: false,
caption: "Payments",
sortable: true,
shrinkToFit: false,
excel: true,
autowidth: true,
height: 300,
subGrid: true, // set the subGrid property to true to show expand buttons for each row
subGridRowExpanded: showChildGrid, // javascript function that will take care of showing the child grid
colModel: [
{ label: 'Payment ID',
name: 'PAYMENTID',
index: 'p.paymentID',
key: true, width: 75
},...// removed for brevity
{name : 'actions',
label: 'Actions',
index: 'formAction',
formatter:'actions',
width: 75,
search:false,
formatoptions: {
keys: true,
editbutton: false,
delOptions: { url: savePaymentURL }
}
}
]
}).inlineNav('#report_pager',
// the buttons to appear on the toolbar of the grid
{
restoreAfterSelect: false, // *****SOLUTION******
save:false,
edit: false,
add: false,
cancel: false
});
Found a solution to the issue. After examining the jqgrid source code I found that restoreAfterSelect: true is the default setting for the inlineNav. I added restoreAfterSelect: false and now the previous row saves.

How to show subgrid in jqgrid in ASP.NET MVC 5?

My jqgrid is working perfectly but now i am implementing the subgrid. It shows the + sign and when i click on it the blank row displayed with loading.... this is the client side code
$(document).ready(function () {
$("#Grid").jqGrid({
url: '/Home/GetDetails',
datatype: 'json',
myType: 'GET',
colNames: ['id','Name', 'Designation', 'Address', 'Salary'],
colModel: [
{ key: false, name: 'Id', index: 'Id', },
{ key: false, name: 'Name', index: 'Name', editable: true },
{ key: false, name: 'Designation', index: 'Designation', editable: true },
{ key: false, name: 'Address', index: 'Address', editable: true },
{ key: false, name: 'Salary', index: 'Salary', editable: true }
],
jsonReader: {
root: 'rows',
page: 'page',
total: 'total',
records: 'records',
id: '0',
repeatitems: true
},
pager: $('#pager'),
rowNum: 10,
rowList: [10, 20, 30],
width: 600,
viewrecords: true,
multiselect: true,
sortname: 'Id',
sortorder: "desc",
caption: 'Employee Records',
loadonce: true,
gridview: true,
autoencode: true,
subGrid: true,
subGridUrl: '/Home/Subgrid',
subGridModel: [{
name: ['No', 'Item','Quantity'],
width: [55, 55,55]
}
],
}).navGrid('#pager', { edit: true, add: true, del: true },
{
zIndex: 100,
url: '/Home/Edit',
closeOnEscape: true,
closeAfterEdit: true,
recreateForm: true,
afterComplete: function (response) {
if (response.responseText)
{
alert(response.responseText);
}
}
},
{
zIndex: 10,
url: '/Home/Add',
closeOnEscape: true,
closeAfterEdit: true,
recreateForm: true,
afterComplete: function (response) {
if (response.responseText) {
alert(response.responseText);
}
}
},
{
zIndex: 100,
url: '/Home/Delete',
closeOnEscape: true,
closeAfterEdit: true,
recreateForm: true,
afterComplete: function (response) {
if (response.responseText) {
alert(response.responseText);
}
}
}
);
});
Subgrid url action method is as below:
public JsonResult Subgrid(String id)
{
Database1Entities db = new Database1Entities();
Product p= new Product {No=1,Item="Juice",Quantity=23};
var jsondata = new { rows=2,
cell = new string[] { p.No.ToString(),
p.Item,p.Quantity.ToString()}.ToArray()
};
return Json(jsondata, JsonRequestBehavior.AllowGet);
}
I am doing this first time. What is the mistake?Thanks in advance
I don't recommend you to use subGridModel. Instead of that it's much more flexible to use Subgrid as Grid. If the user clicks "+" icon (expand subgrid) then jqGrid just inserts empty row under selected with simple structure described in the answer for example. The id of the <div> where some custom "subgrid" information need be displayed will be the first parameter of subGridRowExpanded callback which you need to implement. The second parameter is the rowid of the expending row. By implementing the corresponding callback you can create any custom "subgrid". See the old answer for very simple demo.
So what you need to do is just write the code which creates grid which will be placed in subgrid row. It's only strictly recommended to use idPrefix parameter which used any values which depends from subgriddivid or parent rowid. Additionally you can consider to use autowidth: true option for subgrid, which will make the width of subgrid be exact correspond to the width of the main grid. Of cause to have rowid of the parent row send as id parameter to '/Home/Subgrid' you need use postData: { id: rowid }. See the code from the answer for example which I referenced previously.

jqGrid navgrid problem

I am using the navgrid function for pagination. But the navGrid function is not getting called. I tried to put an alert in the jqgrid.js file where navGrid is defined. But this alert is also not getting called.
$("#order-list-table").jqGrid({
autowidth: true,
datatype : "json",
url: "order-list.htm",
height: '90%',
width: '100%',
mtype: 'POST',
colNames: [
jQuery.i18n.prop('columnExternalOrderID'),
jQuery.i18n.prop('columnInternalOrderID'),
jQuery.i18n.prop('columnState'),
jQuery.i18n.prop('columnDate'),
jQuery.i18n.prop('columnErrorState'),
jQuery.i18n.prop('columnAction'),
],
colModel : [
{name: "Ext Order ID", index: "externalOrderId",jsonmap:"externalOrderId"},
{name: "Int Order ID", index: "id", jsonmap: "id"},
{name: "State", index: "tkOrderStateId", jsonmap: "tkOrderStateId"},
{name: "Date", index:"timestampOrderentry", jsonmap:"timestampOrderentry"},
{name: "Error State", index: "tkErrorStateId", jsonmap: "tkErrorStateId"},
{name: "Action", index: "realty", jsonmap: "realty"}
],
forceFit: true,
altRows: true,
rowNum:2,
rowList:[1,2],
page: 1,
pager: '#order-list-pager',
sortname : "Ext Order ID",
sortorder: "desc",
shrinkToFit: true,
viewrecords: true,
jsonReader : { repeatitems: false },
onSelectRow: function(){
alert(jQuery("#order-list-table").getGridParam('selrow'));
},
gridComplete: function() {
// resize the datagrid to fit the page properly:
$('#order-list').width('100%');
$('#order-list').css('overflow','hidden');
$('#order-list').children('div').width('100%');
$('#order-list').children('div').each(function() {
$("div", this).width('100%');
$("table", this).width('100%');
$("div", this).css('overflow','hidden');
$("table", this).css('overflow','hidden');
$("td", this).css('text-align','center');
$(this).find('#order-list-table').width('100%');
});
}
});
var gwdth = $("#order-list").width();
$("#order-list-table").jqGrid().setGridWidth(gwdth);
jquery("#order-list-table").jqgrid('navGrid',
'#order-list-pager',{edit:true,add:true,del:true});
Above is the jqGrid function that I call.
It seems that your error is very simple: you should replace jquery to jQuery and jqgrid to jqGrid (a capical 'G') in the last line of your code. The following statement should work:
jQuery("#order-list-table").jqGrid('navGrid',
'#order-list-pager',{edit:true,add:true,del:true});

Resources