[kgolofelosParticipant]

Hi Peter,

I seemed to be experiencing the same issue and applied the same hack. After clicking the filter button, the grid performs one ajax call with the filter variables in the request and immediately performs another UNEXPECTED ajax call without the filter variables in the request. This causes the grid not to display filtered results as the second ajax call overrides the first ajax call:

First ajax call:
index.php?r=log%2Fvisitor&ajax=1&action=view&terminal_id=96&create_dateoperator=and&filtervalue0=2015-11-10+00%3A00%3A00&filtercondition0=EQUAL&filteroperator0=0&filterdatafield0=create_date&filterscount=1&groupscount=0&pagenum=0&pagesize=15&recordstartindex=0&recordendindex=15&_=1447402196211

Second ajax call:
index.php?r=log%2Fvisitor&ajax=1&action=view&terminal_id=96&filterscount=0&groupscount=0&pagenum=0&pagesize=15&recordstartindex=0&recordendindex=15&_=1447402196633

Here is my code:

var url = “index.php?r=log%2Fvisitor&ajax=1&action=view”+”&is_export=”+is_export+”&terminal_id=”+id;

// prepare the data
var source =
{
datatype: “json”,
filter: function () {
// update the grid and send a request to the server.
x = 5;
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘filter’);
},
sort: function () {
// update the grid and send a request to the server.
$(“#jqxgrid”).jqxGrid(‘updatebounddata’);
},
id: ‘id’,
url: url,
root: ‘data’,
beforeprocessing: function(data)
{
source.totalrecords = data.TotalRows;
source.displayfields= data.fields;
}
};

// Populate grid with fields
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function () {
// HACK FIX
x = x + 1;
if (x > 2) {
$(“#jqxgrid”).jqxGrid();
jqXHR.abort();
return;
}

displayfields = source.displayfields;

// ID, Site Name, Terminal Name, Log Date and DB Creation Date are standard
field_count=5;
var fields = [
{ text: ‘ID’, dataField: ‘visitor_log_id’ , width: 70},
{ text: ‘Site Name’, dataField: ‘name’, width: 100},
{ text: ‘Terminal Name’, dataField: ‘terminal_txt’, width: 100},
{ text: ‘Log Date’, dataField: ‘log_create_date’, filtertype: ‘date’, cellsformat:’yyyy-MM-dd HH:mm:ss’, width: 150},
{ text: ‘DB Creation Date’, dataField: ‘create_date’,filtertype: ‘date’, cellsformat:’yyyy-MM-dd HH:mm:ss’, width: 150} ];

// Populatate dynamic fields
for(var key in displayfields) {
var value = displayfields[key];
fields[field_count] = {text: displayfields[key], dataField: key, width: 100};
field_count++;
}

// Populate all fields to grid
$(“#jqxgrid”).jqxGrid({columns: fields});
},
downloadComplete: function () {

},
beforeSend: function (jqXHR, settings) {

}
}
);

// Draw empty grid
drawgrid(dataAdapter);

function drawgrid(dataAdapter){
var $window = $(window);
var height = $window.height() – 345;

$(“#jqxgrid”).jqxGrid(
{
width: ‘99%’,
height: height,
source: dataAdapter,
altrows: true,
pageable: true,
sortable: true,
filterable: true,
columnsresize: true,
virtualmode: true,
theme: ‘energyblue’,
selectionmode: ‘multiplecellsextended’,
pagesize: 15,
pagesizeoptions: [’10’,’20’,’30’,’40’,’50’,’100′,’1000′,’2000′],
rendergridrows: function()
{
return dataAdapter.records;
},

});

$(“#excelExport”).jqxButton();
}

Regards
KG

[kgolofelosParticipant]

Hi Greg and Peter,

I’m experiencing the same problem aswell. My date filter works fine with virtual mode:true but the calendar icon does not show – I have to manually type in the date.

It’s very weird that if I store the JSON data into a local variable instead of URL based JSON data, the calendar icon shows.

I would like to find out if anyone has a solution for this?

Regards
Kgolofelo

[Author]

Posts