datagrid virtual scroll view refresh current page

[phunksta]

Hi,

I'm hoping this is a simple question with a simple answer!

I have a datagrid with virtualscrollview, and would like to be able to refresh just the current page of data.
So if the user has scrolled to page 2, then after a while the user clicks a button (or some other javascript event), then the datagrid's current page reloads without going back to page 1, which is what seems to happen when I call dg.datagrid('reload')

I can see a reload() function inside scrolling() inside onBeforeRender() in the scrollview code, but I have no idea how to call it?!

Any help very much appreciated!

[jarry]

Please extend a method to achieve this functionality.

Code:

$.extend($.fn.datagrid.methods, {
	refetch: function(jq){
		return jq.each(function(){
			var target = this;
			var state = $.data(target, 'datagrid');
			var opts = state.options;
			var view = opts.view;
			var dc = state.dc;
			var top = $(dc.body2).scrollTop();
			var index = Math.floor(top/25);
			var page = Math.floor(index/opts.pageSize) + 1;
			
			view.getRows.call(view, target, page, function(rows){
				this.index = (page-1)*opts.pageSize;
				this.rows = rows;
				this.r1 = rows;
				this.r2 = [];
				this.populate.call(this, target);
				dc.body2.triggerHandler('scroll.datagrid');
			});
		})
	}
})

Call the 'refetch' method to fetch the current page.

Code:

$('#dg').datagrid('refetch');

[phunksta]

Brilliant thank you, I will give this a try!

EDIT: This worked wonderfully thank you!

[Opan Mustopah]

thanks for that stworthy, it's work for first time i try,
but when i trying again using your code, when i save new record on editable datagrid using scrollview, my new data won't show on the datagrid?

can you check it again?

thanks

[Pierre]

Please extend a method to achieve this functionality.

Code:

$.extend($.fn.datagrid.methods, {
	refetch: function(jq){
		return jq.each(function(){
			var target = this;
			var state = $.data(target, 'datagrid');
			var opts = state.options;
			var view = opts.view;
			var dc = state.dc;
			var top = $(dc.body2).scrollTop();
			var index = Math.floor(top/25);
			var page = Math.floor(index/opts.pageSize) + 1;
			
			view.getRows.call(view, target, page, function(rows){
				this.index = (page-1)*opts.pageSize;
				this.rows = rows;
				this.r1 = rows;
				this.r2 = [];
				this.populate.call(this, target);
				dc.body2.triggerHandler('scroll.datagrid');
			});
		})
	}
})

Call the 'refetch' method to fetch the current page.

Code:

$('#dg').datagrid('refetch');

Is there any simple example of using 'refetch', please?
I also need to reload data-grid rows on current page but I'm not sure how to do that.
Thank you.

[Pierre]

Hello development
any chance to provide some example of how to reload current page only if using scrollView, please?
As far i understand, it should work with
$('#dg').datagrid('refetch');
but I can not bring it to work.
Thank you in advance!

[jarry]

Please try to call this code to refresh the current page.

Code:

var dg = $('#dg');
var view = dg.datagrid('options').view;
view.reload(dg[0]);

[Pierre]

Hello Jarry
thank you so much for your help but it does not work and I think I know why not.
What I need is to re-read data from server for current page and to update current page with new data.
Question is - how to get data from server for current page only?
I need to reload current scrollview page because it can happen that only one record was changed (after I execute some command) but it can also happen that changing of 1 data-grid record will change many other records on same page.
Thank you.

[Pierre]

Jarry
any chance to help regarding reload records from server for current page only, please?

[jarry]

To reload data from remove server, you have to clear the local cache data. Please try this code:

Code:

onBeforeFetch: function(){
    var data = $(this).datagrid('getData');
    data.firstRows = [];
}

[Pierre]

Hello Jarry
thank you for all your help but looks like I did not explained my problem correctly.
Attached is simple example using load data from server using JSON file.
Steps of how to test:
- Click on button "Click to load" so data is loaded to "dg"
- scroll to end of second page so you can see Item ID 15
- click to button "re-load page", it will load data from file1.json
- Now: I need that "dg" stays on second page and just display changed Item 15
With other words, I need that "dg" do not full reload, but only records on current (second) page.
I think it can be also achieved by post-ing all records of second page to server and once server changed needed records, data will be returned back to "dg" - but how to do that?
What I need is to display changed records, something like "updateRow" but problem is that many records can be changed, not only one, based on some action. I don't know what records will be changed because it is done on server so because of that I need to reload records on current page.
Thank you so much for your help.

[jarry]

If you reload all records(file1.json) from server, you can fetch all these records and update them to the 'firstRows' property.

Code:

function      reloadPage(){
  var dg = $('#dg');
  $.getJSON('file1.json', function(data){
    dg.datagrid('getData').firstRows = data.rows;
    dg.datagrid('options').view.reload(dg[0]);
  });
};

If you reload the current page from server, the server only returns the current page rows, you can use this code to let the datagrid always fetches data from server when scrolling it.

Code:

$('#dg').datagrid({
  onBeforeFetch: function(){
    var data = $(this).datagrid('getData');
    data.firstRows = [];
  }
});

[Pierre]

Thank you Jarry, first option works correctly but if you scroll second page on the middle (so that row 15 is at the end on the grid) and if you click on "Re-load page" (as you can see on attached image) then you can see quick flicker.
Is there any way to avoid flickering?

Regarding reload current page from server, I'm not sure how you mean? I create small example (please see attached) and when I load data, all records are loaded at once.
Thank you if you have other idea or some solution regarding flicker.