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

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

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

Works fine! Thanks

But still unsure if replicate creatDialog() in my code is a good practice... (what about easyui-lib updates ?)
Perhaps an idea for next releases is to provide a new messager.prompt implementing an user-definable text/radio/combo element as dialog body?

Thanks again for your time and your attention
Juan Antonio

Hi all!
I need a sort of messager.prompt, but using radiobuttons instead of textbox
So edited jquery.easyui.min.js and added:

Code:

.....
win.children("input.messager-input").focus();
return win;
},
//JAMC
/* msg is { val:text } collection for each radio button */
radio: function(title, msg, fn) {
	var str="";
	$.each(msg,function(val,text){
		str +='<br /><input type="radio" name="messager-radio" value="'+val+'">'+text+'\n';
	});
 var content = '<div class="messager-icon messager-question"></div>'
                         + '<div>' + title + '</div>'
                         + '<br/>'
                         + str
                         + '<div style="clear:both;"/>';
 var buttons = {};
 buttons[$.messager.defaults.ok] = function(){
         win.window('close');
         if (fn){
     			var val=$('input:radio[name="messager-radio"]:checked').val();
                 fn(val);
                 return false;
         }
 };
 buttons[$.messager.defaults.cancel] = function(){
         win.window('close');
         if (fn){
                 fn();
                 return false;
         }
 };
 // _27f: createDialog()
 var win= _27f(title,content,buttons);
 return win;
},
//END JAMC
progress:function(_28e){
var _28f={bar:function(){
....

This patch works fine for me, but seems a bit dirty because needs patching (obfuscated) library file

My Question: ¿Whats the right way (tm) to extend $.messager to add different dialog styles without patching easyui library?
Thanks in advance
Juan Antonio

How to hide background like in that picture when using EasyUI dialog?

Not sure on what you mean with "hide background".. Is not enought to declare modal="true" property in easyui dialog?
You can check it in demo/dialog/basic.html: change data-options="iconCls:'icon-save'" with data-options="iconCls:'icon-save',modal:true" and try it

Works, great! Thanks a lot.

Cheers
Juan Antonio

Hi all.
This is my first post to this forum. I've not found notices on propper use, so apologizes if this is not the correct way to ask for help

I have an on-the-fly declared datagrid, and so, toolbar is declared as an array.
Is there any way to specify some of the buttons are left-aligned and some other with right alignment

As HTML code It's easy to do:

Code:

    
    <!-- BARRA DE TAREAS DE LA TABLA DE PRUEBAS-->
    <div id="pruebas-toolbar" style="padding:5px 5px 25px 5px;">
        <span style="float:left;">
            <a id="pruebas-newBtn" href="#" class="easyui-linkbutton" onclick="newPrueba()">New prueba</a>
            <a id="pruebas-editBtn" href="#" class="easyui-linkbutton" onclick="editPrueba()">Edit prueba</a>
            <a id="pruebas-delBtn" href="#" class="easyui-linkbutton" onclick="deletePrueba()">Delete prueba</a>
        </span>
        <span style="float:right;">
                <a id="pruebas-reloadBtn" href="#" class="easyui-linkbutton" onclick="reloadDatagrid() >Actualizar</a>
        </span>
    </div>
    .... 
   $('#pruebas-datagrid').datagrid({
   ...
   toolbar: '#pruebas-toolbar',
   ...

But don't know how to do it if declared as an array:

Code:

toolbar:  [
                {
                        id: 'pruebas-newBtn',
                        text: 'New prueba',
                        plain: true,
                        iconCls: 'icon-new',
                        handler: function(){newPrueba();}
                 },{
                        id: 'pruebas-editBtn',
                        text: 'Edit prueba',
                        plain: true,
                        iconCls: 'icon-edit',
                        handler: function(){editPrueba();}
                 },{
                        id: 'pruebas-delBtn',
                        text: 'Delete prueba',
                        plain: true,
                        iconCls: 'icon-delete',
                        handler: function(){deletePrueba();}
                 },{
                        id: 'prueba-reloadBtn',
                        text: 'Actualizar',
                        plain: true,
                        iconCls: 'icon-reload',
                        style: 'align:right', <<<<<<< How to tell toolbar that this item must be right aligned in toolbar?
                        handler: function(){reloadDatagrid();}    // reload the pruebas data}
                 }
               ],

Perhaps declare an string var like first code and assigning to 'toolbar' property? An easy example on how to do this?.

Thanks in advance
Juan Antonio