datagrid group view performance on mobile devices

[Juan Antonio Martínez]

Hi all,
I'm trying to use a group view datagrid with 100+ rows plus dnd support in several tablets (Samsung Galaxy Tab2 / Ipad 2.... )
It's extremely slow, near to unusability... so I'm investigating some ways to improve performance:
- use autoRowHeight:false
- declare formatters  as external (not inlined) methods
- use css styles directly instead of calling styler method

But slowness still persists. So I've looking for any new methods to improve performance:
- ¿Is there any way to tell datagrid do not show group's inner row's until requested ? I'm asking for a "collapsed:true/false" variable for datagrid groups
- Assuming that json received data are already sorted by 'groupField' key, ¿Any way to improve row group lookup?
- Any other hint for using easyui on tablets? I'm really dissapointed with really poor performance

Thanks in advance
Juan Antonio

[stworthy]

The group view has no delay loading feature. You can try to use the treegrid component instead. Please refer to this example http://jsfiddle.net/wknp1v3y/.

When using the treegrid, you can choose to use delay loading tech to improve performance.

[Juan Antonio Martínez]

Ah, thanks. I'll take a look on treegrid

About Drag&Drop: I've tested treegrid-dnd extension, but this is not exactly what i'm looking for: I need dnd to reorder rows at same deep/node level, not to move items accross nodes.

In my code I have a sport competition with several categories and people in each category, and want to use dnd to assign starting order for competitors on each category;  and also reorder categories themselves to elaborate competition daily program.

Any suggestion about methods to be modified? onDragEnter() to check for valid row/node deep, onDrop() to call server to reorder and reload(id?) to repaint node data, Anything else?

EDIT: forget my question. treegrid rendering is even slower than groupview regardless expanded/collapsed state. I'll try to find an alternative solution without jquery

[stworthy]

You may need to describe your question in more detail by using some code snippets or picture.

[Juan Antonio Martínez]

Ok here you are:

https://github.com/jonsito/AgilityContest

( affected code is at ./AgilityContest/agility/tablet directory)

These are two screenshots from my App: a program to handle Dog Agility FCI Contest. These screenshots are intended to be run in a tablet at the ring by the juzge's helper. Two windows, two functions:
- Track on competitors, rounds orders and calls to ring. Easy change order of any of them to take care of any incidence:

- Real time insert of faults, refusals, time and so on each handler/dog to allow external apps (i.e:videowall) run and show realtime results, calls to ring, etc

- Wireless operation. Database and main program resides on a remote server

Mi problem comes on screen 1: when the number of competitors is about 50 or more, refresh screen takes up to 10 seconds in a Samsung GtabII ( about 7secs on Ipad II), Drag and drop.... unusable in tablets. Sure: No problem with server (response time about 21msecs). When running in a normal computers, delay is noticeably lower, but still persist

Checked with Safari (IPad),Firefox,Opera,Dolphin,Crome (Android 4.1)... best response comes from Dolphin, but html5 support is poor and buggy

Server code provides me proper order... no need to reorder/count items at client side, only refresh affected row
So I'm still looking for some way of getting window 1 work with an aceptable response time in a tablet

[stworthy]

Please try to override the render function for the groupview.

Code:

$('#dg').datagrid({
	view: $.extend(groupview,{
		render: function(target, container, frozen){
			var table = [];
			var groups = this.groups;
			for(var i=0; i<groups.length; i++){
				table.push(this.renderGroup.call(this, target, i, groups[i], frozen));
			}
			$(container)[0].innerHTML = table.join('');
		}
	})
})

[Juan Antonio Martínez]

A bit better, but not enought.

I'll try to rework server side, to provide not only sorted data but also group info, to allow groupview code bypass group detection and rwo grouping.
Thanks for the code.

Cheers-
Juan Antonio
(BTW: everyone else -specially Dog Agility lovers- is invited to try, test and contribute with my project :-)