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,'']
}
},
Morning,
I am using jqGrid 4.4.1 - jQuery Grid. I have the next problem.
I have a custom search button, it permits filter data with some params
$('#BtnConsultar').click(function() {
parametros.NoSolicitud = $("#TxtNoSolicitud").val();
parametros.TipoSolicitud = $("#CbTiposSolicitud").val();
parametros.IdUsuario = $("#TxtIdUsuario").val();
parametros.Proveedor = $("#TxtProveedor").val();
parametros.FechaUltModificacionDesde = $("#TxtFechaUltModificacionDesde").val();
parametros.FechaUltModificacionHasta = $("#TxtFechaUltModificacionHasta").val();
parametros.FechaBorradoDesde = $("#TxtFechaBorradoDesde").val();
parametros.FechaBorradoHasta = $("#TxtFechaBorradoHasta").val();
jQuery('grid').jqGrid('clearGridData');
$("#GrdResultadoConsulta").jqGrid('setGridParam', { postData: { parametroJSON: JSON.stringify(parametros)} });
$('#GrdResultadoConsulta').trigger("reloadGrid", [{ current: true}]);
return true;
});
But if before filter data, i have a grid with 20 rows in group of 10 (2 pages) and the data that i want filter be in the second page the grid doesn´t show. I think is a sort problem because if i press colum sort the grid show the row.
Any one with some solution ?
This is my grid code
$("#GrdResultadoConsulta").jqGrid({
url: '<%= Url.Action("GridConsultaSolicitudeEliminadas")%>',
postData: { parametroJSON: JSON.stringify(parametros) },
datatype: 'json',
mtype: 'GET',
colNames: ['No.Solicitud', 'Tipo Solicitud', 'Usuario', 'Proveedor', 'Fecha Creación', 'Fecha Modificación', 'Fecha Borrado', 'Id Notificacion', 'SolicitudesEliminadasID'],
colModel: [
{ name: 'SolicitudID', index: 'SolicitudID', width: 75, align: 'left', sortable: true, resizable: false },
{ name: 'DescTipoSolicitud', index: 'TipoSolicitud', width: 75, align: 'center', sortable: true, resizable: false },
{ name: 'Usuario', index: 'IdUsuario', width: 200, align: 'left', sortable: true, resizable: false },
{ name: 'Proveedor', index: 'NumProv', width: 200, align: 'left', sortable: true, resizable: false },
{ name: 'FechaInicio', index: 'FechaInicio', width: 75, align: 'right', sortable: true, resizable: false },
{ name: 'FechaModificacion', index: 'FechaModificacion', width: 75, align: 'right', sortable: true, resizable: false },
{ name: 'FechaBorrado', index: 'FechaBorrado', width: 75, align: 'right', sortable: true, resizable: false },
{ name: 'IdNotificacion', width: 75, align: 'right', sortable: false, resizable: false },
{ name: 'SolicitudesEliminadasID', hidden: true }
],
pager: $('#GrdResultadoConsultaPager'),
rowNum: 10,
sortname: 'SolicitudID',
sortorder: 'asc',
autowidth: true,
height: '250px',
viewrecords: true,
caption: 'Resultado de consulta solicitudes eliminadas',
loadtext: "Cargando información ...",
hidegrid: false,
loadComplete: function() { },
onSelectRow: function(id) { }
}).navGrid('#GrdResultadoConsultaPager', { edit: false, add: false, search: false, del: false });
Thanks..
PD: Excuse for me english
I found my error.
The error wasn't in the grid, was in the stored procedure.
Solution: Moving the filters to CTE instruction and not in the final query result.
Regards
You cannot <TAB> into the icons for edit/delete/page-navigation and <ENTER> to carry out the corresponding actions. These icons do not get focus as you over different 'actionable' items (e.g. links, input elements). How can this behavior be achieved?
I'm not sure if this answers your question or not, but I was having a similar problem. here is what I ended up doing. In my link formatters I changed the links to buttons and kepboard navigation and actuation is now available.
In the colModel shown below for 'LastName' I have a link formatter of 'lastNameFormatter'
colModel: [
{ name: 'RequestDate', index: 'RequestDate', search: false, width: 110, fixed: true, editable: false, align: 'left', cellStyle:'padding-left:5px', title: false, formatter: ndateFormatter },
{ name: 'LastName', index: 'LastName', search: false, width: 110, title: false, formatter: lastNameFormatter },
{ name: 'DlNum', index: 'DlNum', search: false, width: 130, align: 'left', title: false },
{ name: 'DlState', index: 'DlState', search: false, width: 50, align: 'left', title: false },
{ name: 'UserName', index: 'UserName', search: false, width: 180, align: 'left', title: false, resizable: true },
{ name: 'AuthCode', index: 'AuthCode', search: false, hidden: false, width: 85, sortable: false, formatter: viewLinkFormatter, align: 'left', title: true},
{ name: 'ProbationDescription', index: 'ProbationDescription', search: false, sortable: false, hidden: true, title: false}
],
Which then does the following:
function lastNameFormatter(cellval, opts, rwdat, _act) {
var probationDescription = rwdat.ProbationStatusDescription;
if ((probationDescription == null) ||
(probationDescription.toLowerCase() == "accepted")) {
return "<button type='button' class='jqGridButton' onclick='submitView(\"" + rwdat.AuthCode + "\"); return false;' >" + cellval + "</button>";
} else {
return cellval;
}
So... using a button here seems to do the trick for allowing keyboard navigation of the jqGrid links.
Maybe not an exact answer but hope you find something of use here.
IE 9 displays a horizontal scrollbar on jqgrid which is not the case when rendered in chrome or mozilla.
following are the default configurations that i set when i create my jqgrid
datatype: "local",
colNames: ['Name', 'Note Type', 'Based On', 'Version', 'Status', 'Description', 'Id', 'Tags', 'TemplateId', 'TemplateVersionId', 'IsLocked'],
colModel: [
{ name: 'Name', index: 'Name', title: false, resizable: false, width: 175, classes: 'grid-pointer' },
{ name: 'NoteType', index: 'NoteType', width: 100, title: false, resizable: false, classes: 'grid-pointer', cellattr: function () { return 'style="white-space: normal";"height:auto";"vertical-align:text-top;"'; } },
{ name: 'BasedOn', index: 'BasedOn', width: 100, title: false, resizable: false, classes: 'grid-pointer', cellattr: function () { return 'style="white-space: normal";"height:auto";"vertical-align:text-top;"'; } },
{ name: 'Version', index: 'Version', classes: 'grid-pointer', align: "right", width: 50, title: false, resizable: false },
{ name: 'Status', index: 'Status', width: 80, classes: 'grid-pointer', title: false, resizable: false },
{ name: 'Description', index: 'Description', title: false, resizable: false, width: 135, formatter: self.trimDescription, classes: 'grid-pointer' },
{ name: 'id', index: 'id', hidden: true, title: false },
{ name: 'Tags', index: 'Tags', hidden: true },
{ name: 'TemplateId', index: 'TemplateId', hidden: true },
{ name: 'TemplateVersionId', index: 'TemplateVersionId', hidden: true },
{ name: 'IsLocked', index: 'IsLocked', hidden: true}],
sortname: 'Name',
rowNum: 10,
sortorder: 'asc',
loadonce: true,
viewrecords: true,
multiselect: false,
autowidth:true,
height: 'auto',
rowList: [10, 20, 30],
pager: '#template-grid-pager',
noRecordText: "No records to view",
I had the same issue so I just disabled the overflow by calling the following function. In my case I am only doing it if the grid uses force fit, as all columns should fit then, however if you do not use force fit you can omit the conditional statement.
function jqGridDisableHScroll() {
//if columns are force fit all columns will always fit on screen.
if ($('#yourgrid').jqGrid('getGridParam', 'forceFit')) {
var gridview = $('#gview_yourgrid');
$('.ui-jqgrid-bdiv', gridview).css({ 'overflow-x': 'hidden' });
}
}
Note: The reverse would need to be done though if column resizing is allowed and force fit is not on. Also you could just do this via css if it will be always the case for your grids
I'm using a jqgrid with MVC. Here is my markup:
$("#list").jqGrid({
url: '/GstRate/GstRateGridData/',
datatype: 'json',
mtype: 'POST',
colNames: ['GstRateLookupId', 'Percentage Rate', 'Start Date', 'End Date', 'CreatedByUserName', 'CreatedDateTime', ''],
colModel: [
{ name: 'GstRateLookupId', index: 'GstRateLookupId', hidden: true, key: true, editable: true, editrules: { required: false }, editoptions: { defaultValue: '0'} },
{ name: 'PercentageRate', index: 'PercentageRate', editable: true, editrules: { required: true} },
{ name: 'StartDate', index: 'StartDate', width: 400, align: 'center', formatter: 'date', editable: true, editrules: { required: true }, formatoptions: { srcformat: 'd/m/y', newformat: 'd-m-y' }, editoptions: { dataInit: function (element) { $(element).datepicker({ dateFormat: 'd-m-y' }) } } },
{ name: 'EndDate', index: 'EndDate', width: 400, align: 'center', editable: true, formatter: 'date', formatoptions: { srcformat: 'd/m/y', newformat: 'd-m-y' }, editoptions: { dataInit: function (element) { $(element).datepicker({ dateFormat: 'd-m-y' }) } } },
{ name: 'CreatedByUserName', index: 'CreatedByUserName', hidden: true, editable: true, editrules: { required: false} },
{ name: 'CreatedDateTime', index: 'CreatedDateTime', hidden: true, editable: true, editrules: { required: false} },
{ name: 'act', index: 'act', width: 55, align: 'center', sortable: false, formatter: 'actions', formatoptions: { keys: true, delbutton: false} }
],
pager: $('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
viewrecords: true,
imgpath: '',
caption: 'Gst Rates',
editurl: '/GstRate/SaveGstRate/'
});
$("#list").navGrid('#pager', { edit: false, add: true, del: true, search: false }, {}, {}, { url: "/../GstRate/DeleteGstRate" });
This is working fine but I want to enhance it so that when a new entry is added the startdate value is readonly and defaults to the end date value of the last entry in the database.
The only way I can think of doing this is by somehow calling a server side method to populate the start date in the pop up create new dialog box.
I was thinking of using the dataUrl value in the editoptions to do this but this dataUrl only seems to work for when populating a select list. I don't want a select list here just a readonly text box.
Does anyone know how to achieve this?
I see two different solution ways:
You use beforeShowForm callback set input field of 'StartDate' to readonly and then send request to the server manually per $.ajax. Inside of success callback of the requests you can set the data in the input field of 'StartDate' received from the server.
If you fill the grid you use userdata to save additional information in the grid. Inside of dataInit of the 'StartDate' you get the data which you need from internal userData parameter and make the initialization of the input field.