How to disable enter key in JQGrid Edit? - jqgrid

I've using JQgrid, and using inline edit all working fine but i need to disable the enter key press. Means if user entering values and click enter it not need to do any action. Now its trying to store the data as per edit url. But i don't need this functionality.
Just Disable enter key press on JQGrid.
Can any one help?
Hi Oleg As u asked i'm pasting my code its bit lengthy so i'm posting part which needed.
$("#RevenueReporttbl").jqGrid({
contentType: "application/json; charset=utf-8",
mtype: 'GET',
// url: '/AMForecast/Index/',
height: 'auto',
// width: 'auto',
width: '1150',
gridview: true,
datatype: "local",
loadonce: true,
data: search_result,
colNames: ['ForecastId', 'CustomerId', 'Customer Name', 'UserId', 'Person', 'ProjectId', 'Project Name', 'Edit', 'Ytd'],
colModel: [
{ name: 'ForecastId', index: 'ForecastId', editable: false, sortable: false, hidden: true, fixed: true },
{ name: 'CustomerId', index: 'CustomerId', editable: false, sortable: false, hidden: true, fixed: true },
{ name: 'CustomerName', index: 'CustomerName', width: 130, editable: false, sortable: false, fixed: true },
{ name: 'UserId', index: 'UserId', width: 130, editable: false, sortable: false, hidden: true, fixed: true },
{ name: 'Manager', index: 'Manager', align: 'left', width: 130, editable: false, sortable: false, fixed: true },
{ name: 'ProjectId', index: 'ProjectId', editable: false, sortable: false, hidden: true, fixed: true },
{ name: 'ProjectName', index: 'ProjectName', editable: false, sortable: false, hidden: true, fixed: true },
{ name: 'Edit', index: 'Edit', editable: false, width: 40, align: 'center', hidden: false, sortable: false, fixed: true },
{ name: 'Ytd', index: 'Ytd', editable: false, width: 40, align: 'right', sortable: false, summaryType: 'sum', fixed: true }],
rowNum: 99,
pager: '#pager',
footerrow: true,
userDataOnFooter: true,
altRows: false,
rowList: [100, 200, 300, 400, 500],
multipleSearch: true,
//multiselect: true,
multipleGroup: true,
shrinkToFit: true,
viewrecords: true,
sortorder: "desc",
subGrid: true,
grouping: true, //changed
groupingView: {
groupField: ['CustomerType'],
groupSummary: [true],
groupColumnShow: [false],
groupText: ['<b>{0}</b>'],
groupCollapse: false,
groupOrder: ['asc'],
groupDataSorted: true
},
jsonReader: {
root: "gridModel",
page: "page",
total: "total",
records: "records",
repeatitems: false,
cell: "cell",
id: "id",
subgrid: {
root: "gridModel",
repeatitems: true,
cell: "cell",
id: "id"
}
}
So i'm using subgrid also with read only option.
Please tell how to make enter key false? I dont want to do anything when i clicked enter in edit mode.

Did you see the part of the docs about the keys setting:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing
It says:
If keys is true, then the remaining settings – successfunc, url,
extraparam, aftersavefunc, errorfunc and afterrestorefunc - are passed
as parameters to the saveRow method when the [Enter] key is pressed
(saveRow does not need to be defined as jqGrid calls it
automatically). For more information see saveRow method below.

Related

Jqgrid - edit dialog field not clickable

Using simple built in functionality in Jqgrid where if you set the column property editable to true, it should pop up a form with that field text to be editable. Everything is fine except that the form coming up is not clickable.
Please point me what is wrong with this code before I resort to manual custom form.
$('#tblRecipes').jqGrid({
datatype: 'json',
mtype: 'POST',
url: 'ResultsEditorAjax/GetSampleRecipeValues',
editurl: 'ResultsEditorAjax/SaveSampleRecipeValue',
jsonReader: als.common.jqgrid.jsonReader('Analyte'),
colModel: [
{ name: 'Folderno', index: 'Folderno', sortable: false, hidden: true },
{ name: 'Ordno', index: 'Ordno', sortable: false, hidden: true },
{ name: 'Pcupno', index: 'Pcupno', sortable: false, hidden: true },
{ name: 'Taskcd', index: 'Taskcd', sortable: false, hidden: true },
{ name: 'Analyte', index: 'Analyte', label: 'Analyte', width: 10, sortable: false },
{ name: 'OldFinal', index: 'OldFinal', label: 'Old Value', width: 10, sortable: false },
{
name: 'NewFinal', index: 'NewFinal', label: 'New Value', width: 10,
sortable: false, editable: true, edittype: 'text',
editrules: { custom: true, custom_func: als.webview.analyteresults.validateRecipeValue }
},
{ name: 'Units', index: 'Units', label: 'Units', width: 5 },
{ name: 'Min', index: 'Min', sortable: false, hidden: true },
{ name: 'Max', index: 'Max', sortable: false, hidden: true },
{ name: 'Rounding', index: 'Rounding', sortable: false, hidden: true }
],
caption: '',
height: 200,
width: 400,
hidegrid: false,
shrinkToFit: true,
scroll: true,
rowNum: 10000,
viewrecords: true,
emptyrecords: '',
altRows: true,
pager: '#pagerRecipes',
onSelectRow:
function (rowId) {
},
gridComplete: function () {
},
loadComplete: function (data) {
}
}).jqGrid('navGrid', '#pagerRecipes', {
add: false,
edit: true,
del: false,
refresh: false,
search: false
},
{ // edit
editCaption: 'Edit Value',
mtype: 'POST',
contentType: 'application/x-www-form-urlencoded; charset=utf-8',
resize: false,
modal: true,
// width: 680,
viewPagerButtons: false,
recreateForm: true,
closeAfterEdit: true,
closeOnEscape: true,
beforeInitData: function () {
// $('#grdQcGroups').jqGrid('setColProp', 'Id', { editable: false });
},
serializeEditData: function (postdata) {
// postdata.Id = postdata.id;
return postdata;
}
);

Is it possible to show spinner while inline editing JQGrid?

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,'']
}
},

jqgrid catch reload grid, not every ajax load

I am trying to catch the moment when the grid is reloaded ( grid.trigger('reloadGrid') ) so that I can scroll it to the position needed. What happens at the moment is when I scroll it down it fires the event on every ajax call (like load more rows).
I tried using different events, which one is the right?
The code is simple initialization, nothing special here
jQuery("#filtergrid").jqGrid({
scroll:true,
scrollrows:true,
datatype: 'json',
url: '/bo/filter/index.php?func=get-list',
mtype: 'POST',
colNames:[
'ID',
'Title',
'Domain',
'Random',
'Men',
'Women',
'Snails',
'Min Age',
'Max Age',
'Read Days',
'Click Days',
'Join Days',
'Master',
'<img src="/assets/duplicate.gif">'
],
colModel :[
{name:'flt_id', index:'flt_id', width:50, key:true, search: false, key: true, fixed: true},
{name:'flt_title', index:'flt_title', width:215, fixed: true, formatter: formatName},
{name:'dmn_name', index:'dmn_name', width:220, fixed: true},
{name:'is_random', index:'is_random', search: false, width:50, fixed: true, formatter: stsFormatter, align: 'center', sortable: false},
{name:'is_man', index:'is_man', search: false, width:50, fixed: true, formatter: stsFormatter, align: 'center', sortable: false},
{name:'is_woman', index:'is_woman', search: false, width:50, fixed: true, formatter: stsFormatter, align: 'center', sortable: false},
{name:'is_snals', index:'is_snals', search: false, width:50, fixed: true, formatter: stsFormatter, align: 'center', sortable: false},
{name:'min_age', index:'min_age', search: false, width:53, fixed: true, align: 'center', sortable: false},
{name:'max_age', index:'max_age', search: false, width:58, fixed: true, align: 'center', sortable: false},
{name:'read_days', index:'read_days', width:60, fixed: true, search: false, formatter: numFormatter, align: 'center', sortable: false},
{name:'click_days', index:'click_days', width: 60, fixed: true, search: false, formatter: numFormatter, align: 'center', sortable: false},
{name:'join_days', index:'join_days', width:58, fixed: true, search: false, formatter: numFormatter, align: 'center', sortable: false},
{name:'flt_master', index:'flt_master', width:50, fixed: true, search: false, formatter: stsMasterFormatter, align: 'center', sortable: false},
{name:'editlink', index:'editlink', width:20, fixed: true, formatter: formatEditImg, search: false}
],
lastSel: null,
pager: '#pager',
rowNum: 150,
rowList: [150],
sortname: 'dmn_name',
height: 320,
autowidth:false,
gridview: true,
sortorder: 'asc',
viewrecords: true,
caption: 'Filters',
footerrow : false,
userDataOnFooter : false,
altRows : true,
//postData : '',
multipleSearch:true,
jsonReader : { repeatitems: false },
pager: '#pager',
width: 1130, //shrinkToFit: true
gridComplete: function(){
jQuery("#filtergrid").closest(".ui-jqgrid-bdiv").scrollTop(scrollPosition)
}
});
Thanks!
Instead of gridComplete use loadComplete. Look at this thread for difference between the two events
Grid Complete vs Load Complete

JqGrid Custom search reload grid

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

jqGrid get default entry from server side

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.

Resources