fyltertype: date not working

[rubenfernande3Participant]

I´m trying to use in a grid a filter for dates.
I follow this example to show a calendar icon when i open the filter window http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/filtering.htm

I have the last version installed.
In my case it works but it depends on what kind of data source i use.

If i use a simple xml source like this it works. It shows the calendar icon when i open the fylter window.

//Preparamos los datos.
var source =
{
datatype: “xml”,
datafields: [
{ name: ‘Servicio’, type: ‘string’ }
],
async: false,
record: ‘Table1’,
pagesize: 20,
url: ‘Metodos.aspx/GetServicio’
};

var dataAdapter = new $.jqx.dataAdapter(source,
{ contentType: ‘application/json; charset=utf-8’ }
);

If i use this one, it doesn´t works. It don´t paints the icon and i have the same library, and the same styles … I have to use this because i have a large amount of data and this is better for performance.

var source = null;
function sourceInicial() {
source =
{
datatype: “json”,
datafields: [

{ name: ‘Servicio’, type: ‘string’}

],
sort: function () {
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘sort’);
},
filter: function () {
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘filter’);
},
beforeprocessing: function (data) {
var returnData = {};
data = data.d;
totalrecords = data.count;
returnData.totalrecords = data.count;
returnData.records = data.data;
return returnData;
},
type: ‘get’,
sortcolumn: ‘FechaSolicitud’,
sortdirection: ‘desc’,
formatdata: function (data) {
data.pagenum = data.pagenum || 0;
data.pagesize = data.pagesize || 15;
data.sortdatafield = data.sortdatafield || ‘FechaSolicitud’;
data.sortorder = data.sortorder || ‘desc’;
data.filterscount = data.filterscount || 0;
formatedData = buildQueryString(data);
return formatedData;
},
updaterow: function (rowid, newdata, commit) {
updaterow(newdata);
},
url: ‘NotificacionCompras.aspx/GetSolicitudesPendientes’
};

dataAdapter = new $.jqx.dataAdapter(source, {
contentType: ‘application/json; charset=utf-8’,
loadError: function (xhr, status, error) {
alert(error);
}
});

}

Of course the grid is the same in both cases. Forget that column type is string in data source; this is just for testing.

Is there any known issue for these cases? …

[Peter StoevKeymaster]

Hi rubenfernande3,

You can use such Filter when you filter date columns. As far as I see, you don’t have such in your sample so I would suggest you to see our sample which you btw pointed out.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[rubenfernande3Participant]

Sorry Peter, this is the real code that doesnt work. As you can see the column that i get (FechaSolicitud) is a date. As i said the same code with another kind of datasource (tested with xml) works perfectly showing the calendar icon when i fylter the date.
My question is that if there is a known problem for this case.

var source = null;
function sourceInicial() {
source =
{
datatype: “json”,
datafields: [

{ name: ‘FechaSolicitud’, type: ‘date’, format: “dd/MM/yyyy HH:mm:ss” }

],
sort: function () {
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘sort’);
},
filter: function () {
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘filter’);
},
beforeprocessing: function (data) {
var returnData = {};
data = data.d;
totalrecords = data.count;
returnData.totalrecords = data.count;
returnData.records = data.data;
return returnData;
},
type: ‘get’,
sortcolumn: ‘FechaSolicitud’,
sortdirection: ‘desc’,
formatdata: function (data) {
data.pagenum = data.pagenum || 0;
data.pagesize = data.pagesize || 15;
data.sortdatafield = data.sortdatafield || ‘FechaSolicitud’;
data.sortorder = data.sortorder || ‘desc’;
data.filterscount = data.filterscount || 0;
formatedData = buildQueryString(data);
return formatedData;
},
updaterow: function (rowid, newdata, commit) {
updaterow(newdata);
},
url: ‘NotificacionCompras.aspx/GetSolicitudesPendientes’
};

dataAdapter = new $.jqx.dataAdapter(source, {
contentType: ‘application/json; charset=utf-8’,
loadError: function (xhr, status, error) {
alert(error);
}
});

}

var dataAdapter = null;
sourceInicial();

$(“#jqxgrid”).jqxGrid(
{
width: 850,
theme: ‘energyblue’,
source: dataAdapter,
filterable: true,

sortable: true,
virtualmode: true,
pagesize: 15,
rendergridrows: function (args) {
return args.data;
},
ready: function () {

},
autoshowfiltericon: true,
columns: [
{ text: ‘Servicio’, datafield: ‘FechaSolicitud’, width: “100%”, align: ‘center’, filtertype: ‘date’, columntype: ‘datetimeinput’

}

]
});

});

[Peter StoevKeymaster]

Hi rubenfernande3,

I am commenting what you are posting. In your initial post, there was no date column. The example on our website demonstrates how to implement the feature. Make sure all required Javasscript files are loaded. If they’re not, the filter will be Textbox. Also, as the feature is new, you should use the latest version.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[rubenfernande3Participant]

ok thanks Peter

[Author]

Posts