Search by date with jqgrid - jqgrid

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).

Related

Uncaught TypeError: Cannot read property 'rowactions' of undefined in jqGrid for formatter:'action'

I am using jqGrid V 4.6.0. and trying to implement grid with inline edit/delete functionality.I used formatter:'actions' for acheive this and also getting edit/delete icons in each row.But when i click on those icons i am getting following error in console :Uncaught TypeError: Cannot read property 'rowactions' of undefined and nothing happens in grid.same code and same example i've implemented before with jqGrid V4.4.4 and it worked well ,but in V4.6.0 i got this error.Please somebody help me.Thanks in advance :)
Code for reference:
jQuery("#theGrid").jqGrid({
url: '/Student/Grid',
datatype: "json",
colNames: ['Id', 'Firstname', 'Middlename', 'Lastname', 'Birthdate', 'Birthplace', 'State', 'Nationality', 'Religion', 'Ishandicaped ?', 'Actions'],
colModel: [
{ key: true, name: 'Id', sortable: true, resize: true, align: "center" },
{ key: false, name: 'FirstName', index: 'FirstName', editable: true, align: "center", editrules: { required: true } },
{ key: false, name: 'MiddleName', index: 'MiddleName', editable: true, align: "center", editrules: { required: true } },
{ key: false, name: 'LastName', index: 'LastName', editable: true, align: "center", editrules: { required: true } },
{
key: false, name: 'Birthdate', index: 'Birthdate', editable: true, align: "center", editrules: { required: true }, formatter: 'date', editoptions: {
dataInit: function (el) {
setTimeout(function () {
$(el).datepicker({
dateFormat: "dd-M-yy",
autoSize: true,
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
}, 200);
}
}
},
{ key: false, name: 'Birthplace', index: 'Birthplace', editable: true, align: "center", editrules: { required: true } },
{ key: false, name: 'State', index: 'State', editable: true, align: "center", edittype: "select", editoptions: { value: "GJ:Gujarat;MH:Maharashtra;DL:Delhi;BNG:Banglore;RJ:Rajasthan" }, editrules: { required: true } },
{ key: false, name: 'Nationality', index: 'Nationality', editable: true, align: "center", editrules: { required: true } },
{ key: false, name: 'Religion', index: 'Religion', editable: true, align: "center", editrules: { required: true } },
{
key: false, name: 'IsHandicaped', index: 'IsHandicaped', editable: true, align: "center", edittype: "checkbox", editoptions: { value: "True:False" }, formatter: Demo1
},
{
key: false,
name: 'Actions',
index: 'tax',
width: 80,
align: "center",
formatter: 'actions',
formatoptions: {
delOptions: { url: '/Student/Delete' }
}
}
],
rowNum: 10,
rownumbers: true,
autowidth: true,
rowList: [5, 10, 20],
pager: '#gridPager',
viewrecords: true,
sortorder: "desc",
reloadAfterSubmit: true,
altclass: 'table table-bordered table-striped',
jsonReader: {
repeatitems: false
},
caption:'Studentdata JqGrid V4.4.4',
editurl: '/Student/Edit',
mtype: "post",
height: '100%',
hiddengrid: false,
serializeRowData: function (postData) {
debugger;
// new row id is "new_row"
postData.Id == "jqg1" ? postData.oper = "add" : postData.oper = "add";
return postData;
},
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$(this).jqGrid('setGridParam',
{ datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after Add
return [true, ''];
} else {
$(this).jqGrid('setGridParam',
{ datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after Add
return [false, response.responseText];
}
}
}
});

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

Unable to get property 'stype' of undefined or null reference

I using jqgrid filtertoolbar. I'm having some 4 select filter in that. When i tried to select one of the values in any select box i'm getting the following error.
Unable to get property 'stype' of undefined or null reference
Is there any general error or missing value that i have done anywhere in my code.
//Code:
Sample of colModel:
colModel:
jQuery.ajax({
url: 'ManageCandidateDetails.aspx/GetAllCandidateDetails',
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data) {
// debugger;
genericResult = $.parseJSON(data.d);
// debugger;
jQuery("#CandidateDetailsGrid").jqGrid({
data: genericResult.candidateDetails,
datatype: "local",
// colNames: ['CandidateId', 'Email', 'Name'],
//colModel: [{ name: 'CandidateId', index: 'CandidateId', width: 75}, { name: 'Email', index: 'Email', width: 75 }, { name: 'Name', index: 'Name', width: 100}],
colNames: ['CandidateId', 'Name', 'Email', 'DOB', 'Gender', 'Qualification', 'Department', 'OtherQual', 'OtherDept', 'Exp(Years)', 'Exp(Months)', 'Mobile', 'Country', 'State', 'City', 'ZipCode', 'FilePath', 'Sel.Status', 'CreatedDate', 'ModifiedDate', 'ModifiedBy', 'Status', 'LastLoginTime'],
colModel: [{ name: 'CandidateId', index: 'CandidateId', width: 75, editable: true },
{ name: 'Name', index: 'Name', width: 100, editable: true },
{ name: 'Email', index: 'Email', width: 75, editable: true },
{ name: 'DOB', index: 'DOB', width: 50, editable: true, searchoptions: { dataInit: newDatePick }, editoptions: { dataInit: newDatePick} },
{ name: 'Gender', index: 'Gender', width: 50, editable: true },
{ name: 'Qualification', index: 'Qualification', width: 75, editable: true, stype: 'select', editoptions: { value: ":All;" + genericResult.qualification} },
{ name: 'Department', index: 'Department', width: 75, editable: true, stype: 'select', editoptions: { value: ":All;" + genericResult.department} },
{ name: 'OtherQual', index: 'OtherQual', width: 75, editable: true },
{ name: 'OtherDept', index: 'OtherDept', width: 75, editable: true },
{ name: 'ExperienceYears', index: 'ExperienceYears', width: 75, editable: true },
{ name: 'ExperienceMonths', index: 'ExperienceMonths', width: 75, editable: true },
{ name: 'Mobile', index: 'Mobile', width: 100, editable: true },
{ name: 'Country', index: 'Country', width: 100, editable: true, stype: 'select', formatter: 'select', edittype: 'select',
searchoptions: {
value: allCountries, stype: 'select'
},
editoptions: {
value: allCountries,
dataInit: removeTheOptionAll,
dataEvents: [
{ type: "change", fn: function (e) { changeStateSelect($(e.target).val(), e.target); } }
]
}
},
{ name: 'state', index: 'state', width: 100, formatter: "select", stype: "select",
editable: true, edittype: "select",
editoptions: { value: allStates, dataInit: removeTheOptionAll },
searchoptions: { value: allStates }
},
{ name: 'City', index: 'City', width: 50, editable: true },
{ name: 'ZipCode', index: 'ZipCode', width: 50, editable: true },
{ name: 'FilePath', formatter: function () { return "<img src='../Images/error.png' alt='my image' />"; }, unformat: imageUnFormat, index: 'FilePath', width: 50 },
{ name: 'SelectedStatus', index: 'SelectedStatus', width: 75, edittype: 'checkbox', formatter: 'checkbox', editable: true, editoptions: { value: "1:Yes;0:No" }, stype: 'select', searchoptions: { sopt: ['eq'], value: "All:All;1:Yes;0:No"} },
{ name: 'CreatedDate', index: 'CreatedDate', width: 75, formatoptions: { srcformat: "ISO8601Long", newformat: "d/m/Y h:i A" },
searchoptions: { dataInit: datePick }, editoptions: { dataInit: datePick }
},
{ name: 'ModifiedDate', index: 'ModifiedDate', width: 75, formatoptions: { srcformat: "ISO8601Long", newformat: "d/m/Y h:i A" },
searchoptions: { dataInit: datePick }, editoptions: { dataInit: datePick }
},
{ name: 'Modifiedby', index: 'ModifiedBy', width: 75 },
{ name: 'Status', index: 'Status', width: 50, edittype: 'checkbox', editable: true, stype: 'select', searchoptions: { value: "All:All;1:Yes;2:No"} },
{ name: 'LastLoginTime', index: 'LastLoginTime', width: 75, formatoptions: { srcformat: "ISO8601Long", newformat: "d/m/Y h:i A" },
searchoptions: { dataInit: datePick, attr: { title: 'Select Date'} }, editoptions: { dataInit: datePick }
}],
rowNum: 10,
mtype: 'GET',
loadonce: true,
rowList: [10, 20, 30],
pager: '#CandidateDetailsGridPager',
sortname: 'CandidateId',
viewrecords: true,
caption: "Candidate Details",
ignoreCase: true,
gridview: true,
rownumbers: true
});
jQuery("#CandidateDetailsGrid").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });
$('#CandidateDetailsGrid').jqGrid('navGrid', '#CandidateDetailsGridPager',
{
edit: true,
add: true,
del: true,
search: true,
searchtext: "Search",
addtext: "Add",
edittext: "Edit",
deltext: "Delete"
},
{ // edit option
beforeShowForm: function (form) {
}
},
{ // add option
addcaption: 'Add Candidate Detail',
beforeShowForm: function (form) {
//debugger;
$("#myFormError").remove();
$('#tr_LastLoginTime', form).hide();
$('#tr_CandidateId', form).hide();
$('#tr_Modifiedby', form).hide();
$('#tr_ModifiedDate', form).hide();
$('#tr_CreatedDate', form).hide();
},
onclickSubmit: function (response, postData) {
debugger;
$("#FormError").text("");
$("<tr id='myFormError'><td colspan='2'><div style='background-color:green;color:white; font-weight:bold; width:100%;padding-left:5px;'>Success</div></td></tr>").insertAfter("#FormError");
}
}
);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
}
});
//Unformat the image during the edit.
function imageUnFormat(cellvalue, options, cell) {
return cellvalue
}

How to reload a jqGrid with new query string value

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.

JQGrid hide column and sorting in grouping

I have tried hidden: true, width: 0, display: false but still I see the column in the grid. Than I tried
myGrid.jqGrid('hideCol', ["Type"]);
issue 1:
which is working and column is hidden but once I show collapsed rows than this column is again visible.
issue 2:
I have groupCollapse: true . When I uncollapse and do the sorting than all the rows collapsed again.
Problem:
Collapse/UnCollapse the hidden column shouldn't visible.
When sorting rows collapse.
var myGrid = $('#list');
myGrid.jqGrid({
url: '/Admin/DynamicGridData/',
datatype: 'json',
mtype: 'POST',
colNames: ['Id', 'Date', 'First Name', 'Last Name', 'Email Address', 'Hidden'],
colModel: [
{ name: 'Id', index: 'Id', width: 40, align: "center", editable: false, editoptions: { readonly: true }, key: true, sorttype: "int", searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge']} },
{ name: 'DateEdited', index: 'DateEdited', width: 90, sorttype: "date", formatter: "date" },
{ name: 'FirstName', index: 'FirstName', width: 120, searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge']} },
{ name: 'LastName', index: 'LastName', width: 120, searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge']} },
{ name: 'Email', index: 'Email', width: 300, searchoptions: { sopt: ['cn', 'nc', 'bw', 'bn', 'eq', 'ne', 'ew', 'en', 'lt', 'le', 'gt', 'ge']} },
{ name: 'Type', index: 'Type', hidden: true, width: 0, display: false, search: false }
],
height: 'auto',
autowidth: true,
rownumbers: true,
rowNum: 30,
rowList: [10, 20, 30],
pager: '#pager',
sortname: 'Id',
viewrecords: true,
sortorder: "asc",
multiselect: true,
altRows: true,
altclass: 'myAltRowClass',
caption: "Master Grid",
jsonReader: { cell: "" },
grouping: true,
groupingView: { groupField: ['Type'],
groupColumnShow: [true],
groupText: ['<b>{0} - {1} Record(s)</b>'],
groupCollapse: false,
groupOrder: ['desc']
}
});
myGrid.jqGrid('navGrid', '#pager', { add: false, edit: false, del: true }, {}, {},
{ },
{ multipleSearch: true, overlay: false });
myGrid.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true, defaultSearch: 'cn' });
myGrid.jqGrid('navButtonAdd', '#pager', { caption: "Filter", title: "Toggle Searching Toolbar", buttonicon: 'ui-icon-pin-s', onClickButton: function () { myGrid[0].toggleToolbar(); } });
myGrid[0].toggleToolbar();
myGrid.jqGrid('hideCol', ["Type"]);
You can use either
myGrid.jqGrid('hideCol', "Type");
instead of myGrid.jqGrid('hideCol', ["Type"]); or use
groupColumnShow: [false]
instead of groupColumnShow: [true] because you want hide the column on which you do grouping.

Resources