Print Page - [SOLVED]Right way to programmatically retrieve next/prev Row data in scrollview?

Title: [SOLVED]Right way to programmatically retrieve next/prev Row data in scrollview?
Post by: Juan Antonio Martínez on July 14, 2015, 12:41:06 AM

Hi all.
I have an scrollview with hundreds of entries, and want to navigate throught rows by a sort of cursor
So i wrote something like:

Code:

var currentRow;
....
function nextRow() {
    dg.datagrid('scrollTo',currentRow+1);
    dg.datagrid('selectRow', currentRow+1);
    var data =dg.datagrid('getSelected');
    if (data) currentRow++;
    return data;
}

This works fine in 'normal' datagrids, but fails with scrollview when next row implies a server call to retrieve next data (returns null instead of next row data)

What's the right way to retrieve next/prev row data in scrollview?

Thanks in advance
Juan Antonio

Title: Re: Right way to programmatically retrieve next/prev Row data in scrollview?
Post by: stworthy on July 14, 2015, 01:20:51 AM

Please set the 'idField' property for the datagrid.

Code:

$('#dg').datagrid({
	data: rows,
	idField: 'inv',
	//...
});
function nextRow(){
	var dg = $('#dg');
	var row = dg.datagrid('getSelected');
	var index = dg.datagrid('getRowIndex', row);
	dg.datagrid('scrollTo', index+1);
	dg.datagrid('selectRow', index+1);
}

Title: Re: Right way to programmatically retrieve next/prev Row data in scrollview?
Post by: Juan Antonio Martínez on July 14, 2015, 02:29:34 AM

Thanks, but adding idField only resolves part of the problem: select next row in scrollview

http://www.jeasyui.com/forum/index.php?topic=483.0

But my problem is to retrieve data from next row. This code still returns null on page change

Code:

function nextRow(){
	var dg = $('#dg');
	var row = dg.datagrid('getSelected');
	var index = dg.datagrid('getRowIndex', row);
	dg.datagrid('scrollTo', index+1);
	dg.datagrid('selectRow', index+1);
        return dg.datagrid('getSelected');
}

FYI: firebug returns this error:

Code:

(2) TypeError: a[i] is undefined                                 jquery.....min.js (línea 9086)
if(a[i][opts.idField]==r[opts.idField]){

Seems that js is trying to read row data _before_ data is effectively loaded

Title: Re: Right way to programmatically retrieve next/prev Row data in scrollview?
Post by: stworthy on July 14, 2015, 07:29:28 PM

When scrolling to the row that does not retrieved, the request to loading data will be made. This is a async action, you can not return the selected row from the function. Please try the code below instead.

Code:

function nextRow(cb){
	var dg = $('#dg');
	var opts = dg.datagrid('options');
	var row = dg.datagrid('getSelected');
	var index = dg.datagrid('getRowIndex', row);
	dg.datagrid('scrollTo', index+1);
	var onSelect = opts.onSelect;
	opts.onSelect = function(index,row){
		onSelect.call(dg[0], index, row);
		opts.onSelect = onSelect;
		cb(index,row);
	}
	dg.datagrid('selectRow', index+1);
}

Usage example:

Code:

nextRow(function(index,row){
	console.log('row index: '+index)
})

Title: Re: Right way to programmatically retrieve next/prev Row data in scrollview?
Post by: Juan Antonio Martínez on July 14, 2015, 11:23:20 PM

Thanks: I was looking for a way to trigger onSelect just once. your code did the trick

Juan Antonio

Title: Re: Right way to programmatically retrieve next/prev Row data in scrollview?
Post by: Juan Antonio Martínez on July 16, 2015, 05:18:44 AM

Sorry again: I've found some conditions where your code fails:

1- When datagrid is not visible (i.e. in a collapsed layout), seems as scrollTo() or selectRow() has no effect, and new rows are not properly loaded.
If I made layout panel where datagrid resides visible, everything works fine

Here comes a firebug trace capture. Assumed pageSize=20:

(https://dl.dropboxusercontent.com/u/72813204/trace.png)

2- How can I detect that we are already in _last_ row of last page, to avoid invoke of nextRow()?

Thanks in advance
Juan Antonio

Title: Re: Right way to programmatically retrieve next/prev Row data in scrollview?
Post by: stworthy on July 17, 2015, 12:34:20 AM

Please download the updated 'datagrid-scrollview.js' file from http://www.jeasyui.com/extension/datagridview.php. The 'nextRow' function can be re-written as:

Code:

function nextRow(dg, cb){
	var opts = dg.datagrid('options');
	var row = dg.datagrid('getSelected');
	var index = dg.datagrid('getRowIndex', row);
	dg.datagrid('scrollTo', {
		index: index+1,
		callback: function(index){
			$(this).datagrid('selectRow', index);
			cb(index, $(this).datagrid('getRows')[index]);
		}
	});
}

Title: Re: Right way to programmatically retrieve next/prev Row data in scrollview?
Post by: Juan Antonio Martínez on July 17, 2015, 02:45:17 AM

!! Great !!

Now everything works as expected.

About detecting end-of-rows: I Finally added an extra field "totalRows" to datagrid and populated with 'total' field from json response to check against end of recors to prevent nextRow() to go beyond the available data

Thanks for your time and work
Juan Antonio

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Juan Antonio Martínez on July 14, 2015, 12:41:06 AM