Related
I am using JQGrid. While inline editing the JQGrid and saving data to DB, it takes some time, during that time my page becomes inresponsive. So, during that timespan can I show spinner to show user that your edited data is "Updating..."
I am using the below Code for jqgrid init:
LoadProjectDetailsGrid = function () {
var myGrid = $('#jqgProjectLists');
myGrid.jqGrid("GridUnload");
myGrid.jqGrid({
url: '#Url.Action("GetProjectLists", "Config")',
editurl: '#Url.Action("UpdateProjectListGrid", "Config")',
datatype: 'json',
mtype: 'POST',
contentType: 'application/json; charset-utf-8',
colNames: ['ID', 'PJT', 'Full Name', 'Model Type', 'Pjt Code', 'Model State', 'Project Type', 'Dev. Department',
'Client Model Name1', 'Client Model Name2', 'Client Model Name3', 'Model Status', 'Action'],
colModel: [
{ name: 'Model_ID', index: 'Model_ID', width: 100, sortable: true, align: 'left', editable: false, search: false, hidden: true },
{ name: 'PJT_Nm', index: 'PJT_Nm', width: 150, sortable: true, align: 'left', editable: false, search: true, stype: 'text', searchoptions: { sopt: ['cn', 'eq', 'ne'] }, searchrules: { required: true } },
{ name: 'Model_Nm', index: 'Model_Nm', width: 140, sortable: true, align: 'left', editable: false, search: true, stype: 'text', searchoptions: { sopt: ['cn', 'eq', 'ne'] }, searchrules: { required: true } },
{ name: 'Model_Type', index: 'Model_Type', width: 80, sortable: true, align: 'center', editable: false, search: false },
{ name: 'PJT_Code', index: 'PJT_Code', width: 100, sortable: true, align: 'left', editable: false, search: false, hidden: true },
{ name: 'Model_State', index: 'Model_State', width: 110, sortable: true, align: 'center', editable: false, search: false },
{ name: 'PJT_Type', index: 'PJT_Type', width: 100, sortable: true, align: 'center', editable: false, search: false },
{ name: 'Dev_Dept_Nm_En', index: 'Dev_Dept_Nm_En', width: 200, sortable: true, align: 'left', editable: false, search: false },
{ name: 'Client_Model_Nm1', index: 'Client_Model_Nm1', width: 120, sortable: true, align: 'left', editable: true, search: false, edittype: "text", editoptions: { size: "20", maxlength: "29" }},
{ name: 'Client_Model_Nm2', index: 'Client_Model_Nm2', width: 120, sortable: true, align: 'left', editable: true, search: false, edittype: "text", editoptions: { size: "20", maxlength: "29" }},
{ name: 'Client_Model_Nm3', index: 'Client_Model_Nm3', width: 120, sortable: true, align: 'left', editable: true, search: false, edittype: "text", editoptions: { size: "20", maxlength: "29" }},
{ name: 'Model_Status', index: 'Model_Status', width: 100, sortable: true, align: 'center', editable: true, search: false, edittype: 'checkbox', editoptions: { value: "Y:N" }},
{ name: 'Action', index: 'Action', width: 70, sortable: false, formatter: 'actions', viewable: false, search: false, formatoptions: { keys: true, editformbutton: false, editbutton: true, delbutton: false } }
],
pager: '#jqgProjectListPager',
rowNum: 10,
rowList: [10, 20, 30, 100],
sortname: 'PJT_Nm',
sortorder: "desc",
autowidth: true,
shrinkToFit: true,
viewrecords: true,
gridview: true,
loadonce: true,
rownumbers: true,
rownumWidth: 30,
height: 'auto',
width: 'auto',
caption: " " + "PROJECT LIST",
loadtext: "Loading ...",
emptyrecords: "No data to display!",
multiselect: false,
prmNames: { id: "Model_ID" },
cellsubmit: "remote",
});
// Navi(View, Add,...)search: false,
myGrid.jqGrid('navGrid', '#jqgProjectListPager', { add: false, edit: false, del: false, search: true, view: true, refresh: true },
//edit options
{
},
//add options
{},
//del options
{
},
//search options
{
searchOnEnter: true,
closeOnEscape: true,
reloadAfterSearch: true
},
// veiw options
{
width: 500, height: 'auto',
closeOnEscape: true,
beforeShowForm: function (form) {
},
afterShowForm: function (form) {
},
showHideColumn: function (form) {
}
}
);
$("#jqgProjectLists").jqGrid('inlineNav', '#jqgProjectListPager',
{
add: false,
edit: true,
editicon: "ui-icon-pencil",
save: true,
saveicon: "ui-icon-disk",
savetext : "Save",
cancel: true,
cancelicon: "ui-icon-cancel",
canceltext: "Cancel",
}
);
//handles the grid resize on window resize
ResizeJQGrid(myGrid, $(window));
}
In ConfigController
[AcceptVerbs(HttpVerbs.Post)]
public JsonResult UpdateProjectListGrid(ProjectListsDetails oProjectListRow)
{
_configMgr.UpdateProjectListGrid(oProjectListRow, CurrentCaUser);
JqGridDataRequest jqgdRequest = new JqGridDataRequest();
JqGridDataResponse response = _configMgr.GetProjectLists(jqgdRequest, oProjectListRow, CurrentCaUser);
var jsonData = new
{
total = response.TotalPages,
page = jqgdRequest.page,
records = response.TotalRecords,
rows = response.Rows
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
Well, you can show your spinner on beforeSubmit event and hide your spinner on afterSubmit event in edit options section of your jqgrid difinition, but you can use some different events from documentation.
//edit options
{
beforeSubmit : function(postdata, formid) {
$("#your-spinner").show();
return[true,''];
},
afterSubmit : function(response, postdata)
{
$("#your-spinner").hide();
return [true,'']
}
},
I have a customer details where I am showing the customers bill status which is working fine,
Is it possible to rebind the grid once we loaded the data in grid for example:
when I am coming from another page how to apply search on the existing grid data and rebind it to grid.
Below is my colmodel and other properties which I am using but not working properly,
$("#BillDetails").jqGrid({
url: '../Handler.ashx,
datatype: "json",
colNames: [ 'S.No', 'Bill NO', 'Customer Name', 'Customer Type', 'Bill Date',Bill Status'],
colModel: [
{ name: 'SERIAL', sortable: false, search: true, stype: 'text', width: 40, hidden: false,
align: 'right', sorttype: 'int' },
{ name: 'BILL_NO', sortable: false, search: true, width: 80, hidden: false,
align: 'right',formatter: editLink,},
{ name: 'CUSTOMER_NAME', search: true, align: 'left', width: 150, aligh: 'left',
sortable: false },
{ name: 'CHECK_TYPE', align: 'left', width: 150, search: true, aligh: 'left',
sortable: false},
{ name: 'BILL_DATE', width: 85, sortable: false, search: true, align: 'center',
sorttype: 'date', formatter: "date", formatoptions: { newformat: 'd/m/Y' } },
{ name: 'BILL_STATUS', width: 90, align: 'left', search: true, stype: 'select',
searchoptions: { value: 'Pending:Pending;
On Hold:On Hold;Clear:Clear;Incompelete:InComplete,sortable: false } },
],
width: '980',
height: '450',
shrinkToFit: false,
sortable: true,
mtype: 'GET',
scrollbar: true,
sortname: 'BILL_NO',
sortorder: 'asc',
hidegrid: false,
loadonce: true,
ignoreCase: true,
rowNum: 50,
pager: '#Pager',
viewrecords: true,
// Search on page load from grid data
gridComplete: function () {
var searchFilter = "Clear"; // In this I will receive the the status from query string,
//for now i have provided the the hard core value to test
var gridData = $("#jQGridDemo").jqGrid('getGridParam', 'data');
console.log(gridData);
if (searchFilter != "") {
var grid = $("#BillDetails"), f;
f = { rules: [] };
f.rules.push({ field: "STATUS", op: "eq", data: searchFilter });
grid[0].p.search = true;
$("#BillDetails").setGridParam({ data: gridData, postData: { filters: f },
datatype: "local", });
}
}
});
If you want to reload jqGrid when coming from another page with search parameters you could use postData property of jqGrid.
Something like this:
$("#BillDetails").jqGrid({
url: '../Handler.ashx',
datatype: "json",
mtype: 'GET',
postData:
{
Page: 'Dashboard',
strUserID: strUserID,
}
You can populate this property with js or on server side as you need.
UPDATE
You also can use setGridParam method of jqgrid:
$("#BillDetails").jqGrid('setGridParam',
{
postData: {
Page: 'Dashboard',
strUserID: strUserID,
}
});
$("#BillDetails").trigger("reloadGrid");
But as i understand this way you also just add values to postData property.
Also you can try it this way:
$("#BillDetails").trigger('reloadGrid', [{page:1}]);
You can pass there your new params as on grid init.
i am using jqgrid and facing a problem with column width
here is my js code
jQuery(document).ready(function () {
var grid = jQuery("#grid");
grid.jqGrid({
url: '/Admin/GetUserForJQGrid',
datatype: 'json',
mtype: 'Post',
cellsubmit: 'remote',
cellurl: '/Admin/GridSave',
//formatCell: emptyText,
colNames: ['Id', 'Privileges', 'First Name', 'Last Name', 'User Name', 'Password', 'Password Expiry', 'Type', 'Last Modified', 'Last Modified By', 'Created By', ''],
colModel: [
{ name: 'Id', index: 'Id', key: true, hidden: true, editrules: { edithidden: true } },
{ name: 'Privileges', index: 'Privileges', width: "350", resizable: false, editable: false, align: 'center', formatter: formatLink, classes: 'not-editable-cell' },
{ name: 'FirstName', index: 'FirstName', width:350, align: "left", sorttype: 'text', resizable: true, editable: true, editrules: { required: true } },
{ name: 'LastName', index: 'LastName',width:350, align: "left", sorttype: 'text', resizable: true, editable: true, editrules: { required: true } },
{ name: 'UserName', index: 'UserName', width:300,align: "left", sorttype: 'text', resizable: true, editable: true, editrules: { required: true } },
{ name: 'Password', index: 'Password',width:400, align: "left", sorttype: 'text', resizable: true, editable: false, editrules: { required: true }, classes: 'not-editable-cell' },
{
name: 'Password_Expiry',width:250, index: 'Password_Expiry', align: "left", resizable: true, editable: true, editoptions: {
size: 20, dataInit: function (el) {
jQuery(el).datepicker({
dateFormat: 'yy-mm-dd', onSelect: function (dateText, inst) {
jQuery('input.hasDatepicker').removeClass("hasDatepicker")
return true;
}
});
}
}
},
{
name: 'Type', width: "250", index: 'Type', sorttype: 'text', align: "left", resizable: true, editable: true, editrules: { required: true }, edittype: 'select', editoptions: {
value: {
'Normal': 'Normal',
'Sales': 'Sales',
'Admin': 'Admin',
'SuperAdmin': 'SuperAdmin'
},
dataEvents: [
{
type: 'change',
fn: function (e) {
var row = jQuery(e.target).closest('tr.jqgrow');
var rowId = row.attr('id');
jQuery("#grid").saveRow(rowId, false, 'clientArray');
}
}
]
}
},
{ name: 'Modified',width:250, index: 'Modified', sorttype: 'date', align: "left", resizable: true, editable: false, classes: 'not-editable-cell' },
{ name: 'ModifiedBy', width:250, index: 'ModifiedBy', sorttype: 'text', align: "left", resizable: true, editable: false, classes: 'not-editable-cell' },
{ name: 'CreatedBy', width:250,index: 'CreatedBy', sorttype: 'text', align: "left", resizable: true, editable: false, classes: 'not-editable-cell' },
{ name: 'Delete',width:50, index: 'Delete', width: 25, resizable: false, align: 'center', classes: 'not-editable-cell' }
],
rowNum: 10,
rowList: [10, 20, 50, 100],
sortable: true,
delete: true,
pager: '#pager',
height: '100%',
width: "650",
afterSubmitCell: function (serverStatus, rowid, cellname, value, iRow, iCol) {
var response = serverStatus.responseText;
var rst = 'false';
debugger;
if (response == rst) {
debugger;
setTimeout(function () {
$("#info_dialog").css({
left: "644px", // new left position of ERROR dialog
top: "380px" // new top position of ERROR dialog
});
}, 50);
return [false, "User Name Already Exist"];
}
else {
return [true, ""];
}
},
//rowNum: 10,
//rowList: [10, 20, 50, 100],
sortable: true,
loadonce: false,
ignoreCase: true,
caption: 'Administration',
search: false,
del: true,
cellEdit: true,
hidegrid: false,
pgbuttons : false,
pginput : false,
//viewrecords: true,
gridComplete: function () {
var ids = grid.jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var isDeleted = grid.jqGrid('getCell', ids[i], 'Delete');
if (isDeleted != 'true') {
grid.jqGrid('setCell', ids[i], 'Delete', '<img src="/Images/delete.png" alt="Delete Row" />');
}
else {
grid.jqGrid('setCell', ids[i], 'Delete', ' ');
}
}
}
}
);
grid.jqGrid('navGrid', '#pager',
{ resize: false, add: false, search: false, del: false, refresh: false, edit: false, alerttext: 'Please select one user' }
).jqGrid('navButtonAdd', '#pager',
{ title: "Add New users", buttonicon: "ui-icon ui-icon-plus", onClickButton: showNewUsersModal, position: "First", caption: "" });
});
i need a scrollable grid , when use come to this page i have to show the first 7 columns only just seven in full page. i have 11 columns in my grid rest of the columns can be seen by using scroll, but first 7 should be shown when grid loads. and every column should be re-sizable. can any body help me, i will 100% mark your suggestion if it works for me ...thank you ;) . if something is not explained i am here to explain please help me
and can i save the width of column permanently when user re-size the column, so when next time grid get loads the column should have the same width which is set by the user by re-sizing.. is it possible ?
I am not sure what you want,but you can auto adjust the width with JqGrid autowidth and shrinkToFit options.
Please refer this Post jqGrid and the autowidth option. How does it work?
this will do the trick.
$("#grid").jqGrid({
datatype: 'local',
mtype: 'GET',
loadui: 'block',
altRows: true,
altclass: "myAltRow",
multiselect: false,
recordpos: "right",
pagerpos: "center",
pager: $('#gridt_summarypager'),
pginput: false,
rowNum: 100,
recordtext: "Showing {0} - {1} of {2}",
viewrecords: true,
sortname: 'Project',
sortorder: 'asc',
colNames: ['ProjectID', '<%: Project %>', '<%: ProjectTitle %>' , 'ProjectItemID', '<%: usProjectItem %>', 'Hours To Authorise', 'Hours Not Posted', 'Hours Rejected', 'Last 12 Months'],
colModel: [
{ name: 'ProjectID', index: 'ProjectID', width: 0, hidden: true},
{ name: 'Project', index: 'Project', width: 90, align: 'left', formatter: htmlEncodedString },
{ name: 'ProjectTitle', index: 'ProjectTitle', width: 90, align: 'left', formatter: htmlEncodedString },
{ name: 'ProjectItemID', index: 'ProjectItemID', width: 0, hidden:true },
{ name: 'ProjectItem', index: 'ProjectItem', width: 100, align: 'left', formatter: htmlEncodedString },
{ name: 'HoursToAuthorise', index: 'HoursToAuthorise', width: 125, align: 'right', formatter: timesheetsProjectToAuthoriseQueryFormat },
{ name: 'HoursNotPosted', index: 'HoursNotPosted', width: 125, align: 'right', formatter: timesheetsProjectUnpostedQueryFormat<% if (!(bool)ViewData["PostingEnabled"]) { %>, hidden: true <% } %> },
{ name: 'HoursRejected', index: 'HoursRejected', width: 125, align: 'right', formatter: timesheetsProjectRejectedQueryFormat },
{ name: 'HoursSubmitted12Months', index: 'HoursSubmitted12Months', width: 125, align: 'right', formatter: timesheetsProjectYearQueryFormat }],
imgpath: '../../Scripts/css/ui-lightness/images',
height: 145,
shrinkToFit: false,
hoverrows: false,
loadError: function (xhr, st, err) {
if (xhr.status == 200) {
window.location = '<%= loginPage %>';
}
else if (xhr.status == 500) {
$('#grid_summary_errors').html(xhr.statusText);
}
},
beforeSelectRow: function(rowid, e) {
/* disable row selection */
return false;
},
onSortCol: function (index, columnIndex, sortOrder) {
var col = $("#grid_summarygrid").getGridParam('colNames');
var label = "Ordered by " + col[columnIndex] + " " + sortOrder + "ending";
$("#gridsort").text(label);
}
});
$("#grid").setGridParam({ url: '<%= Url.Action(dataMethod, controllerName)%>?qid=xxx', page: 1, datatype: "json" })
.trigger('reloadGrid');
Currently using jqGrid 4.4.1 and it loads data fine but once sort is applied it updates the sort label buy grid data is not sorted. What is going on? Any help most appreciated...
If you set url and change datatype of grid to "json" then your server code is responsible for sorting of data like for paging too. If you want to load all data for the grid at once and want that jqGrid do sorting and paging for you then you should use loadonce: true option.
I recommend you additionally to include gridview: true option in jqGrid, replace pager: $('#gridt_summarypager') to pager: '#gridt_summarypager', remove not existing parameter imgpath and consider to use autoencode: true option of jqGrid which makes HTML encoding of strings in all columns which not contains custom formatter.
{
name: "name",
index:"name",
**sortable: true,**
editable: true,
**sorttype: 'text',**
key: true
},
Make sure that sorttype complies with the fields data type. for example if the grid field "name" contains int numbers, then you should have sorttype: 'int'.
Also as mentioned by Oleg, you need to set loadonce to true.
pager: "#pager",
gridview: true,
rowNum: 5,
loadonce:true,
multiSort: true,
rownumbers: true,
viewrecords: true,
rowList: [5, 10, 15],
include sortable: true in column as well as jqgrid property.
Chaning this parameter value worked for me.
loadonce: true
For some reason (unknown to me) the event 'formatCell' doesn't fire (no alert message shown). see code below:
$("#jqgrid").jqGrid({
datatype: "json",
colNames: ['CurrecncyID', 'Currency', 'Value', 'Calculated', 'Value', '%', 'Calculated'],
colModel: [
{ name: 'CurrecncyID', index: 'CurrecncyID', hidden: true, width: 40 },
{ name: 'CurrencyName', index: 'CurrencyName', width: 150 },
{ name: 'FullPrice', index: 'FullPrice', width: 100, editrules: { custom: true, custom_func: priceCheck }, editable: true, align: 'right', formatter: priceFormatter },
{ name: 'CalcFullPrice', index: 'CalcFullPrice', width: 100, align: 'right', formatter: priceFormatter },
{ name: 'ActualPrice', index: 'ActualPrice', width: 100, editrules: { custom: true, custom_func: priceCheck }, editable: true, align: 'right', formatter: priceFormatter },
{ name: 'Precent', index: 'Precent', width: 100, align: 'right', formatter: 'integer', formatoptions: { prefix: "% "} },
{ name: 'CalcActualPrice', index: 'CalcActualPrice', width: 100, align: 'right', formatter: priceFormatter },
],
onSelectRow: function (id) {
if (id && id !== lastsel) {
jQuery('#jqgrid').restoreRow(lastsel);
jQuery('#jqgrid').editRow(id, true);
lastsel = id;
}
},
formatCell: function (rowid, cellname, value, iRow, iCol) {
alert("before edit");
},
jsonReader: {
repeatitems: false
},
rowNum: 20,
rowList: [10, 20, 30],
pager: '#jqpager',
sortname: 'CurrecncyID',
viewrecords: true,
sortorder: "desc",
caption: "Prices List",
autowidth: true,
height: "100%",
loadtext: "Loading...",
editurl: "/handlers/myurl.ashx"
});`
There are three main editing modes used in jqGrid. The formatCell event is a part of the cell editing mode. It will be not fire in case of usage of editRow and restoreRow are the part of the inline editing mode. Probably you need use custom editable element in case of the usage of the inline editing mode.