Date Will Not Filter Correctly After Using Formatter on jqGrid Column - jqgrid

Question

I'm having some issues getting a row of Dates to filter correctly in my jqGrid. Here's a portion of my .cshtml:
<script type="text/javascript">
$(function () {
var width = $(window).width() - 50;
$("#orders_grid").jqGrid({
datatype: "local",
width: width,
height: "auto",
search: true,
autowidth: false,
shrinkToFit: true,
colNames: ['ID', 'Status', 'Category','Sub Category', 'Title', 'Owner', 'Team', 'Priority', 'Release', 'Business Line', 'Created', 'Update'],
colModel: [
{ name: 'ID', width: 12, align: 'center', sorttype: 'int'},
{ name: 'GridStatus', width: 15, align: 'center'},
{ name: 'GridCategory', width: 15, align: 'center'},
{ name: 'GridSubCategory', width: 15, align: 'center'},
{ name: 'Title', width: 60, align: 'left' },
{ name: 'GridOwnerUser', width: 20, align: 'center'},
{ name: 'GridTeam', width: 30, align: 'center'},
{ name: 'GridPriority', width: 12, align: 'center'},
{ name: 'GridRelease', width: 12, align: 'center'},
{ name: 'GridBusinessLine', width: 12, align: 'center'},
{ name: 'CreatedDateTime', width: 14, align: 'center', sortable: true, sorttype: 'd', formatter: dateFix },
{ name: 'LastUpdateDateTime', width: 14, align: 'center', sortable: true, sorttype: 'd', formatter: dateFix }
],
rowNum: 20,
rowList: [20,50,100,1000,100000],
viewrecords: true,
pager: '#gridpager',
sortname: "ID",
sortable: true,
ignoreCase: true,
headertitles: true,
sortorder: "desc",
onSelectRow: function (rowId)
{
var id = $("#orders_grid").getCell(rowId, 'ID');
document.location.href = '/TicketCenter/Display/'+ id;
}
}).navGrid("#orders_grid_pager", { edit: false, add: false, del: false }, {}, {}, {}, { multipleSearch: true, multipleGroup: false, showQuery: false, recreateFilter: true });
$("#orders_grid").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true, defaultSearch: 'cn' });
setTimeout(function () { searchOrders('#Model.filterFor'); }, 200);
});
function dateFix(LastUpdateDateTime)
{
var x = LastUpdateDateTime.substring(6, LastUpdateDateTime.length - 2);
x = parseInt(x);
x = new Date(x);
x.setMinutes(x.getMinutes() - x.getTimezoneOffset());
x = x.format("mm/dd/yyyy h:MM TT");
return x;
}
function searchOrders(filter)
{
var data = { filter: filter }
var request = $.ajax({
url: "#Url.Action("ListTickets", "TicketCenter")",
type: "GET",
cache: false,
async: true,
data: data,
dataType: "json",
});
request.done(function (orders) {
var thegrid = $("#orders_grid");
thegrid.clearGridData();
setTimeout(function()
{
for (var i = 0; i < orders.length; i++)
{
thegrid.addRowData(i+1, orders[i]);
}
thegrid.trigger("reloadGrid");
}, 500);
});
request.fail(function(orders) {
});
}
</script>
I need to be able to search in the CreatedDateTime and LastUpdateDateTime columns. When I get my data from the database it it initially a datetime. When the grid loads, the date is displayed as "/Date102342523523463246236236", which is obviously in ticks. I formatted this with the dateFix formatter, which returns the date in mm/dd/yyyy h:MM TT format. Now when I try to search by date, I'm getting strange results. I'm thinking that the underlying data is still unformatted and it's searching off of that. Here's an example:
In my database, the CreatedDateTime for one object is 2013-10-11 20:20:10.963.
When the jqGrid loads the data, it shows /Date(1381537210963).
After I add formatter : dateFix to the colModel, it shows 10/11/2013 4:20 PM.
If I type 10 in the search box, it returns that object.
If I type 10/, it doesn't return anything.
If I type 2013, it doesn't return anything.
Is there a way to resolve this issue?

Answer 1

Decided to convert the date to a string in the controller before sending it to the grid. Resolved.