Related
I am working with Jqgrid on C# and I have an issue when I try
to search by Date because the field 'fecha' in the colModel is a Datetime on the Entity
so, the value that the grid get from json looks like: /Date(1514869200000)/
but with the "formatter: 'date'" the value looks like: 02/01/2018.
When I try to search, the field search by the original value (/Date(1514869200000))
and no as a Date that is that I want
Sorry for my bad English, I hope someone understand me.
Here is my .js
$(function () {
$('#grid').jqGrid({
url: "/Empleados/BuscarEmpleados",
datatype: 'json',
mtype: 'Get',
colNames: ['ID', 'Nombre', 'Cargo', 'Móvil', 'Fecha Inicio', 'Estado', 'Opciones'],
colModel: [
{ label: "ID", key: true, name: 'id', index: 'id', width: '100px' },
{ label: 'Nombre', name: 'nombre', index: 'nombre', width: '280px', searchoptions: { sopt: ['cn', 'eq'] } },
{ label: 'Cargo', name: 'cargo', index: 'cargo', width: '160px', searchoptions: { sopt: ['cn', 'eq'] } },
{ label: 'Movil', name: 'movil', index: 'movil', width: '140px', searchoptions: { sopt: ['cn', 'eq'] } },
{ label: 'Fecha Inicio', name: 'fecha', index: 'fecha', formatter: 'date',
formatoptions: { newformat: 'd/m/Y', srcformat: 'd/m/Y' }, searchoptions: { sopt: ['cn', 'eq', 'gt'] }, width: '150px' },
{ name: 'estado', index: 'estado', width: '155px', search: false },
{ name: 'Opciones', index: 'Opciones', formatter: OpcionesEmpleado, search: false, width: '300px' }
],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [10, 20, 30, 40],
height: "100%",
viewRecords: true,
loadonce: true,
caption: "Empleados",
emptyRecords: "No se han encontrado coincidencias",
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false
},
autowidth: true,
multiselect: false,
}).navGrid('#pager', {
edit: false,
add: false,
del: false,
search: true,
refresh: true
});
You need to add
sorttype: "date"
property to the definition of the column fecha (the column with the date).
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 jqgrid placed on a web page that shows data from a database. One of the column is "status". The database query set the cell value as the status id, but in the grid is shown the actual status description. This is right.
Now, I need to retrieve the actual cell text by mean of jquery.
I tried with:
var selRowId = $("#contratos").jqGrid('getGridParam', 'selrow');
var estActualDesc = $("#contratos").jqGrid ('getCell', selRowId, 'estId');
But I always get the status id, not the cell text.
Any idea how to solve this?
Thanks
Jaime
EDIT:
$("#contratos").jqGrid({
url: "{{ path('_lista_contratos') }}",
datatype: "json",
mtype: "GET",
colNames: ["N° de WF",
"Fecha Ingreso",
"Fecha Despacho",
"Fecha Cierre",
"Fecha Término",
"Fecha Aviso",
"Nombre Fantasía",
"RUT Contraparte",
"Nombre Contraparte",
"Nombre Dado por Contraparte",
"Gerencia Corporativa",
"Agencia o Unidad Operativa",
"Abogado",
"Estado",
"Materia",
"Tipo",
"Complejidad",
"N° Memo",
"Monto UF (anual 3 decimales)",
"Duración",
"Cláusula de Salida",
"Link",
"Borrador",
"Observaciones",
"Fecha de Estado"],
colModel: [
{name: "cntWorkflow", width: 90, editable: true, editoptions: {maxlength: 11, size: 17}, editrules: {required: true, custom: true, custom_func: check_wf}, formoptions: {elmsuffix: '<span class="required">*</span>'}},
{name: "cntFechaIngreso", width: 100, editable: true, editrules: {date: true, required: true}, formoptions: {elmsuffix: '<span class="required">*</span>'}, formatoptions: {srcformat: 'SortableDateTime', newformat: 'd-m-Y'}, editoptions: {size: 17, dataInit: function(el) {
$(el).datepicker({dateFormat: 'dd-mm-yy'});
$(el).mask("?99-99-9999");
}}, searchoptions: {dataInit: function(el) {
$(el).datepicker({dateFormat: 'dd-mm-yy'});
$(el).mask("?99-99-9999");
}}},
{name: "cntFechaDespacho", width: 110, editable: true, editrules: {date: true, required: false}, formatoptions: {srcformat: 'SortableDateTime', newformat: 'd-m-Y'}, editoptions: {size: 17, dataInit: function(el) {
$(el).datepicker({dateFormat: 'dd-mm-yy'});
$(el).mask("?99-99-9999");
}}, searchoptions: {dataInit: function(el) {
$(el).datepicker({dateFormat: 'dd-mm-yy'});
$(el).mask("?99-99-9999");
}}},
{name: "cntFechaCierre", width: 100, editable: true, editrules: {date: true, required: false}, formatoptions: {srcformat: 'SortableDateTime', newformat: 'd-m-Y'}, editoptions: {size: 17, dataInit: function(el) {
$(el).datepicker({dateFormat: 'dd-mm-yy'});
$(el).mask("?99-99-9999");
}}, searchoptions: {dataInit: function(el) {
$(el).datepicker({dateFormat: 'dd-mm-yy'});
$(el).mask("?99-99-9999");
}}},
{name: "cntFechaTermino", width: 100, editable: true, hidden: true, editrules: {date: true, required: false, edithidden: true}, formatoptions: {srcformat: 'SortableDateTime', newformat: 'd-m-Y'}, editoptions: {size: 17, dataInit: function(el) {
$(el).datepicker({dateFormat: 'dd-mm-yy'});
$(el).mask("?99-99-9999");
}}, searchoptions: {dataInit: function(el) {
$(el).datepicker({dateFormat: 'dd-mm-yy'});
$(el).mask("?99-99-9999");
}}},
{name: "cntFechaAviso", width: 100, editable: true, hidden: true, editrules: {date: true, required: false, edithidden: true}, formatoptions: {srcformat: 'SortableDateTime', newformat: 'd-m-Y'}, editoptions: {size: 17, dataInit: function(el) {
$(el).datepicker({dateFormat: 'dd-mm-yy'});
$(el).mask("?99-99-9999");
}}, searchoptions: {dataInit: function(el) {
$(el).datepicker({dateFormat: 'dd-mm-yy'});
$(el).mask("?99-99-9999");
}}},
{name: "cntNombreFantasia", width: 150, editable: true, editoptions: {maxlength: 80, size: 50}},
{name: "cntRutContraparte", width: 110, editable: true, editoptions: {maxlength: 20, size: 17, dataInit: function(el) {
$.mask.definitions['~'] = '[0-9kK]';
$(el).mask("?99.999.999-~");
}}, editrules: {required: true, custom: true, custom_func: is_rut}, formoptions: {elmsuffix: '<span class="required">*</span>'}, searchoptions: {dataInit: function(el) {
$.mask.definitions['~'] = '[0-9kK]';
$(el).mask("?99.999.999-~");
}}},
{name: "cntNombreContraparte", width: 150, hidden: true, editable: true, editoptions: {maxlength: 80, size: 50}, editrules: {required: false, edithidden: true}},
{name: "cntNombreDadoContraparte", width: 150, hidden: true, editable: true, editoptions: {maxlength: 80, size: 50}, editrules: {required: false, edithidden: true}},
{name: "gerencia", width: 200, editable: true, edittype: "select", formatter: 'select', editoptions: {style: 'width: 310px', value: '{{ gerencias }}',
dataEvents: [
{type: 'change',
fn: function(e) {
populate_agencias(this.value, 0);
}
}
]}, stype: 'select', searchoptions: {sopt: ['eq'], value: '{{ gerencias }}'}},
{name: "agcId", width: 200, editable: true, edittype: "select", formatter: 'select', editrules: {required: true}, formoptions: {elmsuffix: '<span class="required">*</span>'}, editoptions: {style: 'width: 310px', value: '{{ agencias }}'}, stype: 'select', searchoptions: {sopt: ['eq'], value: '{{ agencias }}'}},
{name: "abgRut", width: 150, editable: true, edittype: "select", formatter: 'select', editrules: {required: true}, formoptions: {elmsuffix: '<span class="required">*</span>'}, editoptions: {style: 'width: 310px', value: '{{ abogados }}'}, stype: 'select', searchoptions: {sopt: ['eq'], value: '{{ abogados }}'}},
{name: "estId", width: 200, editable: true, edittype: "select", formatter: 'select', editoptions: {style: 'width: 310px', value: '{{ estados }}'}, editrules: {required: true}, formoptions: {elmsuffix: '<span class="required">*</span>'}, stype: 'select', searchoptions: {sopt: ['eq'], value: '{{ estados }}'}},
{name: "dmnMateriaId", width: 200, editable: true, hidden: true, edittype: "select", formatter: 'select', editoptions: {style: 'width: 310px', value: '{{ materias }}'}, stype: 'select', searchoptions: {sopt: ['eq'], value: '{{ materias }}'}, editrules: {required: false, edithidden: true}},
{name: "tipo", width: 200, editable: true, hidden: true, edittype: "select", formatter: 'select', editoptions: {style: 'width: 310px', value: '{{ tipos }}'}, stype: 'select', searchoptions: {sopt: ['eq'], value: '{{ tipos }}'}, editrules: {required: false, edithidden: true}},
{name: "dmnComplejidadId", width: 200, editable: true, hidden: true, edittype: "select", formatter: 'select', editoptions: {style: 'width: 310px', value: '{{ complejidades }}'}, stype: 'select', searchoptions: {sopt: ['eq'], value: '{{ complejidades }}'}, editrules: {required: false, edithidden: true}},
{name: "cntMemo", width: 90, editable: true, hidden: true, editoptions: {maxlength: 11, size: 17, dataInit: function(el) {
$(el).spinner({min: 0});
}}, editrules: {required: false, edithidden: true}},
{name: "cntMonto", width: 90, editable: true, hidden: true, editoptions: {maxlength: 11, size: 17, dataInit: function(el) {
$(el).spinner({min: 0});
}}, editrules: {required: false, edithidden: true}},
{name: "cntDuracion", width: 200, editable: true, hidden: true, edittype: "select", formatter: 'select', editoptions: {style: 'width: 310px', value: '{{ duraciones }}'}, stype: 'select', searchoptions: {sopt: ['eq'], value: '{{ duraciones }}'}, editrules: {required: false, edithidden: true}},
{name: "cntEsSalida", editable: true, hidden: true, edittype: "checkbo x", formatter: 'checkbox', editrules: {required: false, edithidden: true}},
{name: "cntLink", width: 150, hidden: true, editable: true, editoptions: {maxlength: 80, size: 50}, editrules: {required: false, edithidden: true}},
{name: "cntEsBorrador", editable: true, hidden: true, edittype: "checkbox", formatter: 'checkbox', editrules: {required: false, edithidden: true}},
{name: "cntObservacion", width: 150, hidden: true, editable: true, editoptions: {maxlength: 80, size: 50}, editrules: {required: false, edithidden: true}},
{name: 'cntFechaEstado', hidden: true, editable: true, edittype: 'custom', editoptions: {custom_element: statusDateElement, custom_value: statusDateValue}, editrules: {edithidden: false}, formatoptions: {srcformat: 'SortableDateTime', newformat: 'd-m-Y H:i:s'}}
],
jsonReader: {
repeatitems: true,
id: "cntWorkflow"
},
pager: "#paginacion",
rowNum: 10,
rowList: [10, 20, 30],
sortname: "cntWorkflow",
sortorder: "asc",
viewrecords: true,
gridview: true,
autoencode: true,
multiselect: false,
shrinkToFit: false,
caption: "Listado de Contratos",
rownumbers: true,
rownumWidth: 40,
autowidth: true,
height: 'auto',
editurl: "{{ path('_almacena_contrato') }}",
});
$("#contratos").jqGrid('navGrid', '#paginacion',
{edit: true, add: true, del: false, search: false},
{closeAfterEdit: true, width: 550, beforeShowForm: function(formid) {
var selRowId = $("#contratos").jqGrid('getGridParam', 'selrow');
populate_agencias($("#contratos").jqGrid('getCell', selRowId, 'gerencia'), $("#contratos").jqGrid('getCell', selRowId, 'agcId'));
var estActualId = $("#contratos").jqGrid('getCell', selRowId, 'estId');
$.ajax({
type: 'GET',
url: '{{ path('_obtiene_estados_permitidos') }}',
data: 'estado=' + estActualId,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(estados) {
$('#estId').empty();
var optgroup = $('#estId').append(new Option('-- Estado Actual --', estActualId));
if (estados.length > 0)
{
$('<optGroup/>').attr('label', 'Estados Siguientes').appendTo('#estId');
$.each(estados, function() {
optgroup.append(new Option(this.descripcion, this.id));
});
}
}
});
}, afterShowForm: function(form) {
$('#cntWorkflow').attr('readonly', true);
$('#agcId').empty();
$('#agcId').append(new Option('Seleccione primero la Gerencia', ''));
form.css("height", "400px");
form.closest('div.ui-jqdialog').center();
form.append('<input type="hidden" id="oldEstId" value="' + $('#estId').val() + '" />');
},
onclickSubmit: function(params, posdata) {
return {oldEstId: $('#oldEstId').val()};
},
editData: {
'_csrf_token': '{{ csrf_token }}'
}
},
{closeAfterAdd: true, recreateForm: true, width: 550, beforeShowForm: function(formid) {
$.ajax({
type: 'GET',
url: '{{ path('_obtiene_estados_permitidos') }}',
data: 'estado=0',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(estados) {
$('#estId').empty();
$('#estId').append(new Option('', ''));
$.each(estados, function() {
$('#estId').append(new Option(this.descripcion, this.id));
});
}
})
}, afterShowForm: function(form) {
$('#agcId').empty();
$('#agcId').append(new Option('Seleccione primero la Gerencia', ''));
form.css("height", "400px");
form.closest('div.ui-jqdialog').center();
},
editData: {
'_csrf_token': '{{ csrf_token }}'
}
},
{},
{multipleSearch: false, multipleGroup: false})
.navSeparatorAdd("#paginacion", {sepclass: "ui-separator", sepcontent: ''})
.navButtonAdd("#paginacion",
{caption: "",
buttonicon: "ui-icon-note",
onClickButton: function() {
if ($('#contratos').jqGrid('getGridParam', 'selrow') == null)
$.jgrid.info_dialog($.jgrid.errors.errcap, 'Seleccione un contrato', $.jgrid.edit.bClose);
else
location.href = '{{ path('_bitacora') }}/' + $('#contratos').jqGrid('getGridParam', 'selrow');
},
position: "last", title: "Ver bitácora del contrato seleccionado", cursor: "pointer"
});
$("#contratos").jqGrid('filterToolbar', {searchOperators: false});
$.jgrid.edit.addCaption = "Agregar Contrato";
$.jgrid.edit.editCaption = "Modificar Contrato";
$.jgrid.edit.saveData = "¡El contrato fue modificado! ¿Almacena los cambios?";
$.jgrid.formatter.date.newformat = 'd-m-Y H:i';
My data is on the server side, I have code written to do all the searching/filtering/ordering.
My jqGrid has both a filterToolbar, and a search button.
Unfortunately, when I search, the value I pick for the date, is not sent in the request. However, oddly, it DOES send it when it's the filterToolbar's selected date?!?
Why is there nothing in data here?
{"groupOp":"AND","rules":[{"field":"RunDate","op":"le","data":""}]}
Here is my code for the grid.
var loadFileInfoList = function (fileInfoList, pager) {
fileInfoList.jqGrid({
url: 'GetFiles',
datatype: 'json',
mtype: 'POST',
colNames: ['Id', 'Name', 'Interface', 'Amount', 'Type', 'Created', 'Status'],
colModel: [
{ jsonmap: 'Id', name: 'Id', formatter: 'integer', align: 'right', hidden: true },
{ jsonmap: 'Name', name: 'Name', align: 'right', hidden: true },
{ jsonmap: 'InterfaceName', name: 'InterfaceName', align: 'left', width: '100%', sorttype: 'text', frozen: true,
search: true,
searchoptions: {
sopt: ['cn']
}
},
{ jsonmap: 'Amount', name: 'Amount', formatter: 'currency', align: 'right', width: '100%', sorttype: 'number',
search: true,
searchoptions: {
sopt: ['ge', 'le']
}
},
{ jsonmap: 'Type', name: 'Type', align: 'right', width: '100%', sorttype: 'text',
search: true, stype: 'select',
searchoptions: {
value: getTypeFilterOptions(),
sopt: ['eq']
}
},
{ jsonmap: 'RunDate', name: 'RunDate', formatter: 'date', align: 'right', width: '100%', sorttype: 'date',
search: true,
datefmt: 'dd/mm/yyyy',
searchrules: {
date: true
},
searchoptions: {
sopt: ['ge', 'le'],
dataInit: function (elem) {
$(elem).datepicker({
dateFormat: 'dd/mm/yy',
changeYear: true,
changeMonth: true,
showButtonPanel: true,
onSelect: function () {
$(this).keydown();
}
});
}
}
},
{ jsonmap: 'Status', name: 'Status', align: 'right', width: '100%', sorttype: 'text', formatter: formatStatus,
search: true, stype: 'select',
searchoptions: {
value: getStatusFilterOptions(),
sopt: ['eq']
}
}
],
autoencode: true,
sortname: 'RunDate',
sortorder: 'desc',
pager: pager,
rowNum: 5,
viewrecords: true,
height: '100%',
autowidth: true,
ignoreCase: true,
jsonReader: {
repeatitems: false,
root: "rows"
},
altRows: true,
altclass: 'jqGridAltRow',
loadComplete: function () {
$("tr.jqgrow:odd").addClass('jqGridAltRow');
}
});
fileInfoList.jqGrid('navGrid', pager,
{ edit: false, add: false, del: false },
{},
{},
{},
{ closeOnEscape: true, closeAfterSearch: true, multipleSearch: true, multipleGroup: false }
);
fileInfoList.jqGrid('filterToolbar', { searchOnEnter: false, enableClear: true, stringResult: true });
};
loadFileInfoList($('#jqgFileInfoList'), '#jqgPagerFileInfoList');
I suppose that you can solve the problem by changing onSelect callback of datepicker. You can change
onSelect: function () {
$(this).keydown();
}
to
onSelect: function () {
$(this).trigger('change');
}
You can use also more complex construct which I posted in the answer or a little more simple form from here.