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

[Juan Antonio Martínez]

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

[stworthy]

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);
}

[Juan Antonio Martínez]

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

[stworthy]

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)
})

[Juan Antonio Martínez]

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

Juan Antonio

[Juan Antonio Martínez]

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:





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

[stworthy]

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]);
		}
	});
}

[Juan Antonio Martínez]

!! 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