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.
Related
I am working in a Jqgrid and have encountered a problem. I have looked at many examples and read alot of documentation but can't seem to determine why only 1 search option appears in the column header as opposed to the others such as "ge" "le" "eq" etc?
This is my code:
jQuery("#jQGridDemo").jqGrid({
url: 'http://localhost:58404/JQGridHandler.ashx',
datatype: "json",
colNames: ['Property ID', 'Property Ref', 'Short Address', 'Scheme Code', 'Scheme Name', 'Property Type', 'Tenure Type', 'Status'],
colModel: [
{ name: 'PropertyID', index: 'PropertyID', width: 70, align: "left", searchoptions: {sopt: ["ge","le","eq"]}, sortable: true},
{ name: 'PropertyRef', index: 'PropertyRef', width: 75, align: "left", stype: 'text', sortable: true},
{ name: 'ShortAddress', index: 'ShortAddress', width: 200, align: "center", search:true, stype: 'text', searchoptions: {sopt: ["cn","ge","le","eq"]}, sortable: true},
{ name: 'SchemeCode', index: 'SchemeCode', width: 80, align: "center", sortable: true },
{ name: 'SchemeName', index: 'SchemeName', width: 80, align: "center", stype: 'text', sortable: true },
{name: 'PropertyType',width: 80, align: "center",},
{ name: 'TenureType', index: 'TenureType', width: 80, align: "center", sortable: true },
{ name: 'Status', index: 'Status', width: 75, align: "center", sortable: true },
],
beforeProcessing: function (data) {
//Create the filters
getDropDownValues(data, 'PropertyType')
getDropDownValues(data, 'TenureType')
getDropDownValues(data, 'Status')
$(this).jqGrid('destroyFilterToolbar')
.jqGrid('filterToolbar', {
stringResult: true,
searchOperators: true
});
},
onSelectRow: function(id){
if(id && id!==lastsel2){
jQuery('#jQGridDemo').jqGrid('restoreRow',lastsel2);
jQuery('#jQGridDemo').jqGrid('editRow',id,true);
lastsel2=id;
}
},
height: 'auto',
width: 'auto',
rowNum: 30,
editable: true,
mtype: 'GET',
loadonce: true,
rowList: [30, 40, 50],
pager: '#jQGridDemoPager',
sortname: 'PropertyId',
viewrecords: true,
sortorder: 'desc',
caption: "Property Details",
editurl: 'http://localhost:58404/JQGridHandler.ashx'
});
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 load jqgrid with drop down values using onchange event.
But when i again choose some other value in drop down i need the jqgrid to show the corresponding values.
Here s how i load the jqgrid
function getGrid() {
var mOptometrist = $('#optOptometristList').val();// Drop down value
alert(mOptometrist);
//jQuery("#list").jqGrid().setGridParam({ url: 'Schedule.ashx?mOptometristId=' + mOptometrist + '' }).trigger("reloadGrid");
jQuery("#jQGridDemo").jqGrid({
url: 'Schedule.ashx?mOptometristId=' + mOptometrist + '',
datatype: "json",
colNames: ['Id', 'Day', 'Start Time', 'End Time', 'Interval', 'Session', "Patient", 'Slots', 'Room Number'],
colModel: [
{ name: 'SlNo', index: '_id', width: 20, stype: 'text', editable: true, editoptions: { disabled: true} },
{ name: 'DayOfWeek', index: 'Day', width: 150, stype: 'text', sortable: true, editable: true, edittype: "select", formatter: 'select', editoptions: { value: getAllSelectOptions()} },
{ name: 'StartTime', index: 'StartTime', width: 150, editable: true, formatter: 'date', formatoptions: { srcformat: 'u', newformat: 'H:i:s'} },
{ name: 'EndTime', index: 'EndTime', width: 60, editable: true, formatter: 'date', formatoptions: { srcformat: 'u', newformat: 'H:i:s'} },
{ name: 'Interval', index: 'Interval', width: 80, align: "right", editable: true },
{ name: 'Session', index: 'Session', width: 40, align: "right", editable: true },
{ name: 'PatientsPerSlot', index: 'Patient', width: 80, align: "right", editable: true },
{ name: 'Slots', index: 'Slots', width: 150, sortable: false, editable: true },
{ name: 'RoomID', index: 'RoomNumber', width: 100, sortable: false, editable: true }
],
rowNum: 10,
mtype: 'GET',
loadonce: false,
rowList: [10, 20, 30],
pager: '#jQGridDemoPager',
sortname: '_id',
viewrecords: true,
sortorder: 'desc',
caption: "List Employee Details",
editurl: 'Schedule.ashx?mOptometristId= ' + mOptometrist,
loadComplete: function () {
$("#jQGridDemo").setColProp('Day', { editoptions: { value: "1:Sunday;2:Monday;3:Tuesday"} });
}
});
You can use
url: "",
postData: {
mOptometristId: function () {
return $('#optOptometristList').val();
}
}
instead of
url: 'Schedule.ashx?mOptometristId=' + mOptometrist + ''
Inside of onchange event you need just call $("#jQGridDemo").trigger("reloadGrid");. See the answer for more details.
I have a grid that is loaded inside a jquery dialog. I have done row editing and row saving within onSelectRow event. When a row is edited and saved and then another row is clicked, previous row remains in the edited form. I am not able to save and remove the edited form.
Id of my table on which I want to load the grid is MultiCount.
And I have binded the grid inside a function bindShapesGrid(), below is the code.
I have hardcoded a XML String and used it as the data.
function bindShapesgrid() {
var xmlstring = "<root><rows><row><cell>Shortnamevalue</cell><cell>does not equal</cell><cell>and</cell><cell>sad</cell><cell></cell><cell></cell></row><row><cell></cell><cell></cell><cell></cell><cell></cell><cell></cell><cell></cell></row></rows></root>"
var lastsel2;
jQuery("#MultiCount").jqGrid({
datatype: 'xmlstring',
datastr: xmlstring,
colNames: ['ShortName', 'Operand 1', 'Value 1', 'AndOr', 'Operand 2', 'Value 2'],
colModel: [{ name: 'ShortName', index: 'ShortName', align: 'center', width: 80, editable: true, edittype: "select" },
{ name: 'Operand1', index: 'Operand1', align: 'center', width: 90, editable: true, edittype: "select", editoptions: { value: RetrievegridOperandList() } },
{ name: 'Value1', index: 'Value1', align: 'center', width: 40, editable: true },
{ name: 'AndOr', index: 'Refer', align: 'center', width: 80, editable: true, edittype: "select", editoptions: { value: "AND:And;OR:Or" } },
{ name: 'Operand2', index: 'Operand2', align: 'center', width: 80, edittype: "select", editable: true, editoptions: { value: RetrievegridOperandList() } },
{ name: 'Value2', index: 'Value2', align: 'center', width: 40, editable: true }],
root: 'rows',
row: 'row',
celledit: true,
sortname: 'ShortName',
sortorder: 'asc',
viewrecords: true,
gridview: true,
height: "100%",
rowNum: 10,
onSelectRow: function (id) {
if (id && id !== lastsel2) {
jQuery('#MultiCount').jqGrid('editRow', id, true);
jQuery("#MultiCount").jqGrid('saveRow', lastsel2, true);
lastsel2 = id;
}
}
});
}
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