Search code examples
jqgrid

Search by date with 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
});

Solution

  • You need to add

    sorttype: "date"
    

    property to the definition of the column fecha (the column with the date).