jqxGrid Refresh With Timed Event

[jqwidgetsdevParticipant]

Hello.

I like to add some functionality to my grid to allow it an automatic every minute refresh.

How can this be accomplished? Perhaps able to share some code?

Thanks.

[DimitarParticipant]

Hello jqwidgetsdev,

You can achieve this with the setInterval method, e.g.:

var refreshInterval = setInterval(function () {
    $("#jqxgrid").jqxGrid("updatebounddata");
}, 60000);

Alternatively, you may call refresh and not updatebounddata.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[jqwidgetsdevParticipant]

Thanks Dimitar.

I am still struggling with this one. Can you please take another look?

My objective is to refresh the contents of the grid every minute. The JSON data that populates the list resides in the List variable. To get the updated data, I must re-execute the query and produce the JSON.

var refreshInterval = setInterval(function () {
console.log(‘refresh’);
var List = [(~webactionGetList.Execute~)]; // WebHub’s web action produces the JSON contents to be displayed in the grid.
dataAdapter.dataBind(); // required?
$(“#jqxGrid”).jqxGrid(“updatebounddata”);
}, 60000);

I also tried with explicit data binding, using dataBind(). However, I am not sure if this is required.

Any thoughts on how this can be resolved gracefully?

Thanks.

[jqwidgetsdevParticipant]

Hello.

The issue I am facing is still not resolved. Perhaps if I share code some more code someone can point me in the right direction.

var refreshInterval = setInterval(function () {
// AJAX call will return
// var data = {……};

var url = ‘mypage’;

$.ajax({
type: ‘POST’,
url: url,
// data: { “data”: JSON.stringify({}) },
contentType: ‘application/json; charset=utf-8’,
// tell to expect JSON in the response, and parse it automatically
datatype: ‘json’,
error: function (request, status, error) {
console.log(‘error=’+error);
console.log(‘error status=’+status);
},
success: function (result) {
console.log(‘result=’+result);
}
});
//

var newSource = {
datatype: ‘json’,
datafields: [
{ name: “f1”, type: “string” }
],
localdata: data
};

var newDataAdapter = new $.jqx.dataAdapter(source, {
downloadComplete: function (data, status, xhr) { },
loadComplete: function (data) {
console.log(‘refresh’);

// perform data binding.
newDataAdapter.dataBind();
$(“#jqxGrid”).jqxGrid(“source”, newDataAdapter);
$(“#jqxGrid”).jqxGrid(“updatebounddata”);
},
loadError: function (xhr, status, error) { }
});
}, 60000);

Thanks.

[Peter StoevKeymaster]

Hi jqwidgetsdev,

For performing data binding using the same data source, you should just call “updateboundata” method. You should not do anything else and I do not suggest you to do it. As far as I see from the last post, your code performs 3 data binding operations where only an “updatebounddata” method call is required.

In addition, it seems that you use custom Ajax calls instead of handling Ajax calls through the jqxDataAdapter so in your scenario, you’d better update the Grid’s data within the Ajax function’s success callback.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[jqwidgetsdevParticipant]

Thanks Peter for your response.

Can you please elaborate on your last paragraph I am afraid I do not understand this yet.
As suggested, I have updated the code to call “updatebounddata” within Ajax function’s success callback.

var refreshInterval = setInterval(function () {

var url = ‘mypage’;

$.ajax({
type: ‘POST’,
url: url,
// data: { “data”: JSON.stringify({}) },
contentType: ‘application/json; charset=utf-8′,
// tell to expect JSON in the response, and parse it automatically
datatype: ‘json’,
error: function (request, status, error) {
console.log(‘error=’+error);
console.log(‘error status=’+status);
},
success: function (result) {
console.log(‘result=’+result);
$(“#jqxGrid”).jqxGrid(“updatebounddata”);
}
});
}, 5000);

Best regards.

[Peter StoevKeymaster]

Hi jqwidgetsdev,

“updatebounddata” in general makes a dataAdapter dataBind method call and updates the Grid. In your scenario, you split your binding logic in 2 things – you handle server request through Ajax call(not through jqxDataAdapter) and then you use the localData to load the dataAdapter. As a solution, you have 2 options – 1. handle the Ajax requests through jqxDataAdapter as shown in our samples. The other option is to update the jqxDataAdapter’s data, too in the success callback and then call “updatebounddata”. See our Refresh Data online demo.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[jqwidgetsdevParticipant]

Hello Peter.

I am trying to understand this better. Thanks for your help. Still some of this is somewhat of a mystery to me. Small steps, please bear with me.

I am trying option 1.

Problem: jqxDataAdapter loadServerData is not getting called.

What calls the jqxDataAdapter loadServerData callback function? Is this perhaps raised by jqxGrid updatebounddata? If not, I miss something in the middle and I do not know what this is.

I do see jqxDataAdapter loadComplete is being called.

var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function (data) {
console.log(“loadComplete: “+data);
},
loadServerData: function (serverdata, source, callback) {
console.log(“loadServerData”);

…….
…….

outputs:

loadComplete: [object Object],[object Object],[object Object]

Is this expected?

Further I have

var refreshInterval = setInterval(function () {
$(“#jqxGrid”).jqxGrid(“updatebounddata”);
console.log(“updatebounddata called”);
}, 5000);

The generated output comes every 5 seconds:

updatebounddata called

Are you please able to point me in the right direction?

Thanks & regards

[jqwidgetsdevParticipant]

Hello Peter.

I am still not able to get this to work. Callback loadServerData is just never called.

Does this code make sense?

var source = {
datatype: ‘json’,
datafields: [
{ name: “f1”, type: “string” }
],
localdata: data
};

var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function (data) {
console.log(“loadComplete: “+data);
},

loadServerData: function (serverdata, sourceDeploymentLog, callback) {
console.log(“loadServerData”);

// make AJAX call and update the grid’s data in the Ajax function’s success callback.
}
});

var refreshInterval = setInterval(function () {
$(“#jqxGrid”).jqxGrid(“updatebounddata”);
console.log(“updatebounddata called”);
}, 5000);

Any help is appreciated.

Best regards.

[jqwidgetsdevParticipant]

Dear jQWidgets team.

I hit a road bock here. Sorry to ask again but, can you please assist me to resolve the issue I am facing?
Can you please guide me?

Many thanks.

[jqwidgetsdevParticipant]

Anyone please?

Many thanks.

[jqwidgetsdevParticipant]

For the benefit of others the issue was resolved through the help of the following post.

Please note the use of VIRTUAL MODE.

http://www.jqwidgets.com/community/topic/using-virtualmode-with-loadserverdata/

Best regards.

[Author]

Posts