validate jqgrid data on the server, callback function - jqgrid

I am using autocomplete in a textbox on my jqgrid. But i should not allow the user to select the same item twice. Because of pagination he wont see all data all times. Is there a way that on sending new row to server check for duplicate data in the server and send a status back to jqgrid maybe poping up an alert sayign "row already exist on table". What would be the bst approach to do this validation and notify the user? thanks.
$("#assessmentproduct").jqGrid({
url: 'orthofixServices.asmx/GetProductList',
colNames: ['id', 'Product Description', 'Commission Rate'],
colModel: [
{ name: 'id', hidden: true },
{ name: 'description', index: 'desc', width: 320, editable: true },
{ name: 'commissionrate', index: 'com', width: 120, editable: true, unformat: percentUnFormatter, formatter: percentFormatter, editrules: { number: true} }
],
serializeRowData: function(data) {
var params = new Object();
params.id = 0;
params.prdid = $("#prdid").val();
params.description = data.description;
params.commissionrate = data.commissionrate;
var result = JSON.stringify({ 'passformvalue': params, 'oper': data.oper, 'id': data.id });
return result;
},
mtype: "POST",
rowNum: 4,
height: 93,
width: 400,
pager: '#assessmentpager',
editurl: "orthofixServices.asmx/ModifyProductList"
});
$("#assessmentproduct").jqGrid('navGrid', '#assessmentpager', { add: false, edit: false, del: true, refresh: false, search: false }, {}, {}, { serializeDelData: function(postData) {
return JSON.stringify({ 'passformvalue': null, 'oper': postData.oper, 'id': postData.id });
}
});
$("#assessmentproduct").jqGrid('inlineNav', '#assessmentpager', { addParams: { position: "last", addRowParams: {
"errorfunc": duplicateRow, "aftersavefunc": function() { var grid = $("#assessmentproduct"); reloadgrid(grid); }
}
}, editParams: { "aftersavefunc": function() { var grid = $("#assessmentproduct"); reloadgrid(grid); } }
});

You should just hold the simple rule: if an error occur on the server (for example because of validation error) the server response should contains some error HTTP status code. In the case error message will be displayed to the user.
The exact error processing and the displayed error message format depends from the editing mode which you use. In case of inline editing I would recommend you to use errorfunc and restoreAfterError parameters of the editRow method. In case of form editing the errorTextFormat callback can be very helpful.

Related

Add check boxes in Jquery grid view

I have the following code in page which binds the data to j query grid.
Now i want to add one more column for check-boxes to the existing grid and when i select some check boxes and press some button .. i need to get the selected row values .
I have seen some tutorials for this they mentioned about some formatter .... but they are not clear
Please help me to achieve this.
Thanks in advance.
Code:
$(document).ready(function () {
$("#btn_GenerateEmpList").click(function () {
var firstClick = true;
if (!firstClick) {
$("#EmpTable").trigger("reloadGrid");
}
firstClick = false;
var empId= $("#txt_emp").val();
$.ajax({
type: "POST",
url: "PLBased.aspx/GetEmpNames",
data: JSON.stringify({ empId: empId}),
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (result) {
result = result.d;
jQuery("#EmpTable").jqGrid({
datatype: "local",
colNames: ['Emp Name'],
colModel: [
{ name: "EmpName", Index: "EmpName", width: 80 }
],
data: JSON.parse(result),
rowNum: 10,
rowList: [5, 10, 20],
pager: '#pager',
loadonce: false,
viewrecords: true,
sortorder: 'asc',
gridview: true,
autowidth: true,
sortname: 'EMPID',
height: 'auto',
altrows: true,
});
},
error: function (result) {
alert("There was some error ");
}
});
});
});
You can use customformatter to show checkbox in the column. For this, you can write the code as below in your jqGrid Code.
colNames: ['Id','Emp Name','Emp Checkbox'],
colModel: [
{ name: 'Id', index: 'Id', hidden: true },
{ name: 'EmpName', Index: 'EmpName', width: 80 },
{ name: 'Empchk', Index: 'Empchk', width: 50, align: 'center', editable: true, edittype: "checkbox", editoptions: { value: "true:false" },
formatter: generateEmpCheckBox, formatoptions: { disabled: false } }
],
formatter function code as below,
function generateEmpCheckBox(cellvalue, options, rowObject) {
var checkedStr = "";
if (cellvalue == true) {
checkedStr = " checked=checked ";
}
return '<input type="checkbox" onchange="UpdateEmpcheckbox(' + rowObject.Id + ',this)" value="' + cellvalue + '" ' + checkedStr + '/>';
}
function UpdateEmpcheckbox(selectedId, chkBox) {
if ($(chkBox).prop("checked")) {
//you can write an ajax here, to update the server
//when the checkbox is checked
}
else if (!($(chkBox).prop("checked"))) {
//you can write an ajax here to update the server
//when the checkbox is unchecked
}
return false;
}
Set the option multiselect:true which will add column of checkboxes. Then add
$('#EmpTable').jqGrid('getGridParam', 'selarrrow')
will return an array of selected id's.

jqgrid with web api not getting populated

I am very new to jqGrid. I am trying to load simple jqgrid using asp.net web api.
The api send back the list of emailDto. The emailDto is plain class with 3 public properties
The problem is the jqgrid is not getting populated. Any help is very much appreciated.
function dataBindToGrid() {
var lastsel;
$("#emailgrid").jqGrid({
url: '/api/email/',
datatype: "json",
mytype: 'GET',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
colNames: ['Address ID', 'Type', 'Email'],
colModel: [{ name: 'Address_ID', width: 70, primaryKey: true, editable: false, sortable: false, hidden: false, align: 'left' },
{ name: 'Email_Type', width: 70, editable: true, align: 'left', sortable: false },
{ name: 'Email_Address', width: 200, editable: true, align: 'left', sortable: false }
],
onSelectRow: function (id) {
if (id && id !== lastsel) {
var grid = $("#emailgrid");
grid.restoreRow(lastsel);
grid.editRow(id, true);
lastsel = id;
}
},
//This event fires after all the data is loaded into the grid
gridComplete: function () {
//Get ids for all current rows
var dataIds = $('#emailgrid').jqGrid('getDataIDs');
for (var i = 0; i < dataIds.length; i++) {
//Put row in edit state
$("#emailgrid").jqGrid('editRow', dataIds[i], false);
}
},
rowNum: 3,
viewrecords: true,
caption: "Email Addresses"
});
}
When configured for jsondatatype, jqGrid expects data in the following json format:
{
"total": "xxx",
"page": "yyy",
"records": "zzz",
"rows" : [
{"id" :"1", "cell" :["cell11", "cell12", "cell13"]},
{"id" :"2", "cell":["cell21", "cell22", "cell23"]},
...
]
}
data returned must match this otherwise it will not work. This is the default json structure (you can change this if you want). Depending on what browser you are using, you should be able to see the ajax request and response with what data is being sent and returned when the grid is building itself (Firefox use firebug, IE use the developer toolbar)
as per here
Solved!
Just added to jqGrid below and it works.
jsonReader: {
repeatitems: false,
page: function () { return 1; },
root: function (obj) { return obj; },
records: function (obj) { return obj.length; }
},

JQGrid, Edit Url

I am new to jQuery, and I need to use jqGrid in my project.
I have one problem with edit/delete/insert; I have only one URL, editurl, then in the controller I am using the oper property to decide whether it is an insert or delete operation.
But I want to have a separate URL for the edit, delete and insert operations in jqGrid. Could you please let me know how to achieve that?
Client side code:
$(document).ready(function () {
var lastsel2;
var grid = jQuery("#list5").jqGrid({
url: '/home1/GetUserData',
datatype: "json",
mtype: "POST",
colNames: ['Code', 'LoginID', 'Emailid', 'CreateDate'],
colModel: [
// { name: 'act', index: 'act', width: 75, sortable: false },
{name: 'Code', index: 'Code', width: 55, editable: true },
{ name: 'LoginID', index: 'LoginID', width: 90, editable: true },
{ name: 'Emailid', index: 'Emailid', width: 100, editable: true },
{ name: 'CreateDate', index: 'CreateDate', width: 100, editable: true }
],
rowNum: 10,
width: 700,
height: 300,
rowList: 10,
pager: $("#pager2"),
editurl: "/home1/EditUserData",
onSelectRow: function (id) {
if (id && id !== lastsel2) {
if (id == "new_row") {
grid.setGridParam({ editurl: "/home1/InsertUserData" });
}
else {
grid.setGridParam({ editurl: "/home1/EditUserData" });
}
jQuery('#list5').restoreRow(lastsel2);
$("#list5_ilsave").addClass("ui-state-disabled");
$("#list5_ilcancel").addClass("ui-state-disabled");
$("#list5_iladd").removeClass("ui-state-disabled");
$("#list5_iledit").removeClass("ui-state-disabled");
lastsel2 = id;
}
},
caption: "Simple data manipulation"
});
jQuery("#list5").jqGrid('navGrid', '#pager2', { edit: false, add: false, del: true, search: false, refresh: false }, {}, {}, { url: '/home1/DeleteUserData' });
jQuery("#list5").jqGrid('inlineNav', "#pager2", { edit: true, add: true, del: true, search: false, refresh: false });
});
You can pass options for all the actions with navGrid method like this:
jQuery('#list5').jqGrid('navGrid', '#pager2', { edit: true, add: true, del: true },
//edit options
{ url: '/home1/EditUserData' },
//add options
{ url: '/home1/AddUserData' },
//delete options
{ url: '/home1/DeleteUserData' }
);
Please read more here and here.
UPDATE
In case of inlineNav method jqGrid is always passing the same set of parameters (editParams) to saveRow method. As the effect the edit/add request will be made to the same URL. You are sticked with checking oper to distinguish edit for add.
In the subject of reloading the grid you can use editParams to set aftersavefunc to trigger realoadGrid like this:
jQuery('#list5').jqGrid('inlineNav', '#pager2', { edit: true, add: true, editParams: {
aftersavefunc: function(rowId, response) { jQuery('#list5').trigger('reloadGrid'); }
}});
But you should remember that it will also cause a refresh after edit (because of the same reason as described above) - you may try to use response parameter to distinguish those two. I have also removed del, search and refresh from the code as inlineNav doesn't have those options.

this.p is undefined jqgrid

I have an interesting issue. I have done this on multiple pages with multiple grids. The first grid works fine the second grid in this case fails to load. and give the following error:
this.p is undefined
...sArray(i)){P=true;h="last";U=f}else{i=[i];P=false}this.each(function(){var D=i.l... line 140 jquery.jqGrid.min.js
The user doble clicks on a row and that sets some variables and then calls the function locationGrid().
Like I said this has worked for me multiple times in the past, however on this page it fails. I have double checked and I am getting data back as shown below:
{"d":"{\"total\":1,\"page\":0,\"records\":1,\"rows\":[{\"invPartLocId\":1053,\"inventoryMasterId\":5,\"location\":null,\"itemType\":\"S\",\"currentQanity\":1,\"adjustedQauntity\":0,\"newLocationQty\":0,\"deptCode\":\"1401 \"}]}"}
Any help would be appreciated.
function locationGrid() {
$('#invLocAdjustGrid').jqgrid({
height: 290,
loadui: "block",
datatype: function (rdata) { getLocationData(rdata); },
colNames: ['invPartID', 'locationPartID', 'Loctaion', 'Type', 'Current QTY', 'Adjusted QTY', 'New Location QTY', 'Dept. Code'],
colModel: [
{ name: 'invPartLocId', width: 2, sortable: false, editable: false, hidden: true },
{ name: 'inventoryMasterId', width: 2, sortable: false, editable: false, hidden: true },
{ name: 'location', width: 250, editable: false, sortable: false },
{ name: 'itemType', width: 120, editable: false, sortable: false, align: 'center' },
{ name: 'currentQanity', width: 50, editable: false, sortable: false },
{ name: 'adjustedQauntity', width: 50, editable: false, sortable: false },
{ name: 'newLocationQty ', width: 50, editable: false, sortable: false },
{ name: 'deptCode', width: 50, editable: false, sortable: false }
],
pager: jQuery('#rptCodesPager'),
viewrecords: true,
width: 890,
gridComplete: function () {
$('#load_invLocAdjustGrid').hide();
$(this).prop('p').loadui = 'enable';
$('#lui_invLocAdjustGrid').hide();
},
afterInsertRow: function (rowid, aData) {
},
ondblClickRow: function (rowid) {
var myID = $('#invLocAdjustGrid').getCell(rowid, 'invPartLocId');
Ldclicked(myID);
}
});
}
function getLocationData(rdata) {
var theID = tempID;
tempID = "";
var myDTO = { 'id': theID };
var toPass = JSON.stringify(myDTO);
$.ajax({
type: 'POST',
contentType: "application/json; charset=utf-8",
dataType: "json",
url: "INV_Inventory_Adjustment.aspx/getInventoryLocationById",
data: toPass,
success: function (data, textStatus) {
if (textStatus == "success")
ReceivedLocationData(JSON.parse(getMain(data)).rows);
},
error: function (data, textStatus) { alert('An error has occured retrieving data!'); }
});
}
function ReceivedLocationData(data) {
var thegrid = $('#invLocAdjustGrid');
var isGood = data.length;
for (var i = 0; i < isGood; i++) {
thegrid.addRowData(i + 1, data[i]);
}
}
Sorry, but your code is buggy. Moreover I recommend you to rewrite the whole code and I try to explain why.
The first important error is that you use $('#invLocAdjustGrid').jqgrid({...}); in the locationGrid instead of $('#invLocAdjustGrid').jqGrid({...});. JavaScript is case sensitive, so it's very important to use jqGrid instead of jqgrid.
Next problem exist because you use some variables and functions tempID, Ldclicked and getMain which you not defined in the posted code.
After making minimal changes the demo works. I commented only "POST" to use HTTP GET because I get the JSON directly from the file and have no active components on the wed server.
One more problem which you clear have is that your server code serialize the results twice. Typically one have the problem because of wrong usage of ASMX WebMethods. One should not convert the object to JSON manually. Instead of that one need just return the object itself. Because of the problem the d property of the JSON are not the object itself and is a string which should be one more time be parsed:
{
"d": "{\"total\":1,\"page\":0,\"records\":1,\"rows\":[{\"invPartLocId\":1053,\"inventoryMasterId\":5,\"location\":null,\"itemType\":\"S\",\"currentQanity\":1,\"adjustedQauntity\":0,\"newLocationQty\":0,\"deptCode\":\"1401 \"}]}"
}
Even such wrong formatted data can be read by jqGrid without usage datatype as function. Moreover you should always use gridview: true and never use afterInsertRow and almost never use addRowData. The modified code can be about the following:
var tempID = "abc";
$('#invLocAdjustGrid').jqGrid({
url: "INV_Inventory_Adjustment.aspx/getInventoryLocationById",
mtype: "POST",
datatype: "json",
postData: {
id: function () { return tempID; } // ??? I don't know which data should be send
},
ajaxGridOptions: { contentType: "application/json" },
serializeRowData: function (data) {
return JSON.stringify(data);
},
beforeProcessing: function (data) {
$.extend (true, data, $.parseJSON(data.d));
},
jsonReader: {repeatitems: false},
loadonce: true,
colNames: ['invPartID', 'locationPartID', 'Loctaion', 'Type', 'Current QTY', 'Adjusted QTY', 'New Location QTY', 'Dept. Code'],
colModel: [
{ name: 'invPartLocId', width: 2, key: true, hidden: true },
{ name: 'inventoryMasterId', width: 2, hidden: true },
{ name: 'location', width: 250 },
{ name: 'itemType', width: 120, align: 'center' },
{ name: 'currentQanity' },
{ name: 'adjustedQauntity' },
{ name: 'newLocationQty ' },
{ name: 'deptCode' }
],
cmTemplate: {sortable: false, width: 50},
pager: '#rptCodesPager',
viewrecords: true,
gridview: true,
loadui: "block",
height: 290,
width: 890,
ondblClickRow: function (rowid) {
//Ldclicked(rowid);
}
});
The next demo demonstrate that the code work. I included in the demo the option loadonce: true which can be helpful for you too.

Jqgrid on Edit operation sends "add" as oper="add" why?

I have a weird one. After changing the data store from session to oracle, when i hit Edit on the 'inlineNav' it always goes to the server with the "add" operation. Any ideas why this could happened?
$("#assessmentproduct").jqGrid({
url: 'orthofixServices.asmx/GetProductList',
colNames: ['id', 'Product Description', 'Commission Rate'],
colModel: [
{ name: 'id' },
{ name: 'description', index: 'desc', width: 170, editable: true },
{ name: 'commissionrate', index: 'com', width: 80, editable: true, unformat: percentUnFormatter, formatter: percentFormatter, editrules: { number: true} }
],
serializeRowData: function(data) {
var params = new Object();
params.id = 0;
params.prdid = parseInt($("#prdid").val());
params.description = data.description;
params.commissionrate = data.commissionrate;
return JSON.stringify({ 'passformvalue': params, 'oper': data.oper, 'id': data.id });
},
mtype: "POST",
rowNum: 4,
height: 93,
width: 400,
pager: '#assessmentpager',
editurl: "orthofixServices.asmx/ModifyProductList"
});
$("#assessmentproduct").jqGrid('navGrid', '#assessmentpager', { add: false, edit: false, del: true, refresh: false, search: false }, {}, {}, { serializeDelData: function(postData) {
return JSON.stringify({ 'passformvalue': null, 'oper': postData.oper, 'id': postData.id });
}
});
$("#assessmentproduct").jqGrid('inlineNav', '#assessmentpager', { addParams: { position: "last", addRowParams: {
"aftersavefunc": function() { var grid = $("#assessmentproduct"); reloadgrid(grid); }
}
}, editParams: { "aftersavefunc": function() { var grid = $("#assessmentproduct"); reloadgrid(grid); } }
});
You use JSON.stringify inside of serializeRowData to serialize the posted data to JSON. It's the reason of the encoding which you describe.
UPDATED: OK! Now I see at the end what's the problem. The reason of the misunderstanding was because you used oper="add" in the title instead of oper=add. I understood you that this is your problem (sending of quoted oper="add" instead of oper=add). OK. The problem with sending of oper=add in case of edit operation is known jqGrid bug which is already fixed in the code on the github (see here). You can make the same changes in jquery.jqGrid.src.js and use the fixed code till the new version of jqGrid will released.

Resources