jqgrid saving records for inline editing - jqgrid

in jqgrid for inline editing when we click the save icon, ** internally it calls the saveRow method, but i want to call my custom method where i will implement my save logic as well calling to controller method.**
i used below code for grid.
var grid = jQuery("#list5").jqGrid({
url: '/home1/GetUserData',
datatype: "json",
mtype: "POST",
colNames: ['Code', 'LoginID', 'Emailid', 'CreateDate', 'PostalCode', 'Mobile'],
colModel: [
{name: 'Code', index: 'Code', width: '16%', editable: true, sortable: true },
{ name: 'LoginID', index: 'LoginID', width: '16%', editable: true, sortable: true },
{ name: 'Emailid', index: 'Emailid', width: '16%', editable: true,
sortable: true },
],
rowNum: 10,
height: '100%',
scrollOffset: 0,
rowList: 10,
shrinkToFit: true,
pager: $("#pager2"),
editurl: "/home1/EditUserData",
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},
});
});
so please anyone let me know how to implement it.

I don't really understand your requirements. saveRow has a lot of customization possibilities. You can rename all parameters which will be sent to the server using prmNames option of jqGrid. Using extraparam parameter of saveRow you can specify additional information which can be sent to the server. The callback serializeRowData can be used to implement your custom serialization. For example you can convert the data to JSON. Using aftersavefunc you can make some custom actions after the data will be successfully saved on the server. So I recommend you use the features instead of implementing your custom saveRow method.
UPDATED: If you want to have navigator icon which uses your custom saveRow you should don't add "Save" button by inlineNav. You can use save: false option of inlineNav. Then you can just use navButtonAdd and add your custom icon which look exactly like original "Save" button and make call of your "custom saveRow" in the onClickButton callback.

Related

Jqgrid does not showing data

Please see my js code below
$(function () {
$("#grid").jqGrid({
url: "/Home/GetRoles",
dataType: 'json',
mtype: 'Get',
colNames: ['ID', 'Role Name', 'Active'],
colModel: [
{ key: true, hidden: true, name: 'RoleId', index: 'RoleId' },
{ key: true, name: 'RoleName', index: 'RoleName' },
{ key: true, name: 'Active', index: 'Active' }
],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [10, 20, 30, 40],
height: '100%',
viewrecords: true,
caption: 'Roles',
emptyrecords: 'No records to display',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
id: "0"
},
autowidth: true,
multiselect: false
});
});
and output of Get request
{"total":2,"page":1,"records":13,"rows":[{"RoleId":1,"RoleName":"Role1","Active":true},{"RoleId":2,"RoleName"
:"Role 2","Active":false},{"RoleId":13,"RoleName":"Role 3","Active":false},{"RoleId":3,"RoleName":"Role
4","Active":false},{"RoleId":4,"RoleName":"Role 5","Active":false},{"RoleId":5,"RoleName":"Role 6","Active"
:false},{"RoleId":6,"RoleName":"Role 7","Active":false},{"RoleId":7,"RoleName":"Role 8","Active":false
},{"RoleId":8,"RoleName":"Role 9","Active":false},{"RoleId":9,"RoleName":"Role 10","Active":false}]}
but grid is always empty
You should fix dataType: 'json' to datatype: 'json', the property key: true could be placed only in one column. You should remove it from columns RoleName and Active. Your JSON data contains line feed in the middle of the string "Role 4". Have the JSON data really new line character on the place? It would be the error too.
Moreover you should always write the information about the version of jqGrid you use and from which fork (free jqGrid, Guriddo jqGrid JS or an old jqGrid in version <=4.7). The problem existing in one version can not exist in another one. Moreover different version and forks have different options implemented and so to suggest you some workaround one need to know the version and the fork which you use. I develop free jqGrid fork, and can recommend you to you the latest version (4.13.0) of jqGrid from the fork.

how to add refresh button to jqgrid toolbar?

i am working on jqgrid. i want to add refresh button to jqgrid toolbar to refresh the grid.
here is my js code:
jQuery(document).ready(function () {
var grid = jQuery("#gridemp");
grid.jqGrid({
url: '/Admin/GetTimeInOut_ForAdmin',
datatype: 'json',
mtype: 'Post',
height: '100%',
multipleSearch: false,
rownumbers: true,
//formatCell: emptyText,
colNames: ['User', 'Date', 'TimeIn', 'TimeOut'],
colModel: [
{ name: 'User', index: 'User', align: "center", sorttype: 'text', resizable: true, editable: false },
{ name: 'Date', index: 'Date', align: "center", sorttype: 'text', resizable: true, editable: false, searchoptions: { dataInit: function (el) { $(el).datepicker({ dateFormat: 'mm/dd/yy' }).change(function () { $('#gridemp')[0].triggerToolbar(); }); } } },
{ name: 'TimeIn', index: 'TimeIn', align: "center", sorttype: 'text', resizable: true, editable: false },
{ name: 'TimeOut', index: 'TimeOut', align: "center", sort:false, resizable: true, editable: false }
],
//shrinkToFit: true,
// loadonce: false,
//ignoreCase: true,
width: '690',
pager: '#emppager',
caption: 'Employee Time IN/OUT',
rowNum: 10,
rowList: [10, 20, 50, 100],
viewrecords: true,
hidegrid: false,
}
);
grid.jqGrid('filterToolbar',{ stringResult: true, searchOnEnter: true, defaultSearch: 'cn' });
grid.jqGrid('navGrid', '#emppager',
{ resize: false, add: false, search: false, del: false, refresh: false, edit: false, alerttext: 'Please select one user' }
).jqGrid('navButtonAdd', '#pager');
});
actually i need 2 refresh buttons one for to clear the search bar text boxes without refreshing the jqgrid, and one for refreshing the whole grid. i will mark your answer if it works for me. thanks in advance. happy coding :), if you the question is not clear please comment i will explain.
First of all it seems your code contains typing error: you use pager: '#emppager' during creating grid, in navGrid but not in navButtonAdd.
To add "standard" reload button which reset filter toolbar and reload the grid you need just remove refresh: false option.
To add custom clear filter you need call navButtonAdd in the way like below
.jqGrid("navButtonAdd", "#emppager", {
caption: "", // no text near the button
title: "Clear filters in toolbar without reloading of data",
buttonicon: "ui-icon-close", // an example of icon
onClickButton: function () {
this.clearToolbar(false); // don't reload grid
}
});
You can change icon used by Refresh button by usage refreshicon option (at the same place where you specify del, refresh, alerttext etc). Default value is refreshicon: "ui-icon-refresh". Moreover you can consider to use refreshstate: "current" (default is refreshstate: "firstpage").

Prevent save on enter key press

I am using jqgrid in my page and now I want to prevent submitting it when enter key is pressed form an editable column. Here is my code.
$( '#mygrid' ).jqGrid( {
url: '/Mycontroller/LoadMygrid',
postData: {
bank_ID: function () { return $( '#bank_accountHead_ID' ).val() },
},
//type of data
datatype: 'json',
//url access method type
mtype: 'POST',
editurl: 'clientArray',
colNames: ['chkbox', 'Sl.#', 'amount'],
//columns model
colModel: [
{ name: 'chkSelect', index: 'chkSelect', align: "center", editable: true, edittype: 'checkbox', width: '20px', editoptions: { value: "True:False" },
fixed: true, formatoptions: { disabled: false}
},
{ name: 'Sl_No', index: 'Sl_No', align: 'left'},
{ name: 'TotalAmt', index: 'TotalAmt', align: 'right', editable: true, edittype: 'text' }
]
..................
});
I tried setting keys:false in colmodel. Not working. Any other method?
I suppose that you use inline editing close to the form described in the question. I posed the bug report. The UPDATED part of my answer describes the problem more detailed. I recommend you to verify whether your problem will be fixed if you would used fixed version of jquery.jqGrid.src.js which you can download here.

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.

jqgrid form editing problem

I'm using jqGrid with mvc 2 like this:
jQuery("#extension_grid").jqGrid({
url: '/Extension/Report',
datatype: "json",
direction: "rtl",
height: "auto",
jsonReader: { root: "rows", page: "page", total: "total", records: "records", repeatitems: false, userdata: "UserData" },
colModel:
[
{ name: 'id', label: 'داخلی', key: true, search: true, width: 55 },
{ name: 'assigned_user', label: 'کاربر', width: 90, editable: true },
{ name: 'creation_date', label: 'تاریخ ایجاد', width: 100, formatter: 'date', formatoptions: { newformat: 'Y-m-d H:i:s'} }
],
rowNum: -1,
pager: '#extension_pager',
sortname: 'id',
viewrecords: true,
sortorder: "asc",
caption: "داخلی‌ها",
editurl: '/Extension/MyEdit'
});
jQuery("#extension_grid").jqGrid('navGrid', '#extension_pager', { edit: true, add: true, del: true }, {}, {}, {}, { multipleSearch: true });
when I select a row and click the edit button a dialog appears and I can edit the row. after submit, data is posted to the editurl successfully. but changes are not saved to grid client side. should I save the changes client side manually?
I tried with datatype local and it works!!! what should I do? is there any problem with using json data and form editing?
The situation which you described seems me very strange. There are default setting reloadAfterSubmit:true for "Add" and "Edit" forms. It means that after submitting of the "Edit" form for example the grid contain will be reloaded. You can verify with respect of Fiddler or Firebug that the grid reloading take place. So either your server part '/Extension/MyEdit' not save the data or another the server '/Extension/Report' don't get the refreshed data. Do you have some kind of data caching on the server?
So you should analyse the problem which you have more exctly. If you would not solve the problem yourself you should update/append your question with more additional information.

Resources