Filter grid date range

[jnegro1176Member]

Hello. I am currently using jqxgrid and filtering rows successfully using other widgets on the same page. The only thing that I can’ t figure out or find an example on is how to filter a date column using a before and after date field. I’d like to be able to filter the rows to a date range. Is there an example of this somewhere, and is it even possible? Thanks in advance.

[Peter StoevKeymaster]

Hi jnegro1176,

You may look at the Filter Row sample. The Date Filter is filtering by range.

Best Regards,
Peter Stoev

jQwidgets Team
http://www.jqwidgets.com

[jnegro1176Member]

Thanks Peter. I’ve switched to the filterrow method and I’m able to filter by date. The only thing I can’t figure out is how to filter by a start and end date, only by exact date. Here’s some of my code. Any input would be greatly appreciated.

var source = {
datatype: ‘json’,
datafields: [
{ name: ‘id’, type: ‘number’},
{ name: ‘creator’, type: ‘string’},
{ name: ‘status’, type: ‘string’},
{ name: ‘subject’, type: ‘string’},
{ name: ‘created’, type: ‘date’},
{ name: ‘assigned_to’, type: ‘string’},
{ name: ‘edit’},
],
url: ‘{{ apiurl }}’,
id: ‘id’,
}

var dataAdapter = new $.jqx.dataAdapter(source, {
downloadComplete: function (data, status, xhr) { },
loadComplete: function (data) { },
loadError: function (xhr, status, error) { }
});

$(“#TableContainer”).jqxGrid(
{
sortable: true,
filterable: true,
showfilterrow: true,
width: tableWidth,
pageable: true,
pagesize: defaultRows,
pagesizeoptions: [’15’,’25’,’50’],
autoheight: true,
source: dataAdapter,
columnsresize: true,
columns: [
{ text: ‘ID’, datafield: ‘id’, width: 50 },
{ text: ‘Creator’, datafield: ‘creator’, width: ((tableWidth * .2)-20), filtertype: ‘checkedlist’, filteritems: userList },
{ text: ‘Status’, datafield: ‘status’, width: ((tableWidth * .2)-20), filtertype: ‘checkedlist’, filteritems: statusList },
{ text: ‘Subject’, datafield: ‘subject’, width: ((tableWidth * .2)-20) },
{ text: ‘Created’, datafield: ‘created’, width: ((tableWidth * .2)-20), filtertype: ‘date’, cellsformat: ‘yyyy-MM-dd hh:mm tt’ },
{ text: ‘Assigned To’, datafield: ‘assigned_to’, width: ((tableWidth * .2)-20), filtertype: ‘checkedlist’, filteritems: userList },
{ text: ”, datafield: ‘edit’, width: 50 },
],
});

[Peter StoevKeymaster]

Hi jnegro1176,

The “date” filter allows you to filter by start and end date. The first selected date in the Calendar is the start date, the second selected date in the Calendar is the end date. If you want to filter by exact date, double-click on a date in the calendar.

As a side note, you can set your columns width to a percentage value, too.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts