This code works for me. It replaces $('#frm').form('submit,{...}); with an $.ajax equivalent
Notice I had to move form('validate') outside of ajax call, to avoid override of beforeSend() method

So seems to me that handling of 'ajax' property in jeasyui form is not working properly. ¿any ideas?

Code:

function savePrueba() {
    // take care on bool-to-int translation from checkboxes to database
    $('#pruebas-Cerrada').val( $('#pruebas-Cerrada').is(':checked')?'1':'0');
    var frm = $('#pruebas-form');
    if (!frm.form('validate')) return; // don't call inside ajax to avoid override global beforeSend()
    $.ajax({
        type: 'GET',
        url: '/agility/server/database/pruebaFunctions.php',
        data: frm.serialize(),
        dataType: 'json',
        // beforeSend: function(jqXHR,settings){ return frm.form('validate'); },
        success: function (result) {
            if (result.errorMsg){ 
            	$.messager.show({width:300, height:200, title:'Error',msg: result.errorMsg });
            } else {
                $('#pruebas-dialog').dialog('close');        // close the dialog
                $('#pruebas-datagrid').datagrid('reload');    // reload the prueba data
            }
        }
    });
}

Hi all:
I'm trying to use an special header for send SessionKey to server, so I added following code at body.onload():

Code:

	// make sure that every ajax call provides sessionKey
	$.ajaxSetup({
	  beforeSend: function(jqXHR,settings) {
		if ( typeof(authInfo.SessionKey)!=undefined && authInfo.SessionKey!=null) {
			jqXHR.setRequestHeader('X-AC-SessionKey',authInfo.SessionKey);
		} else {
                        // no SessionKey found, do not send special header
			alert("No Session Key"); // just for debug
		} 
	    return true;
	  }
	});

This code works fine in almost $.ajax calls... but beforeSend is never invoked when I use easyui form('submit',options}.

Code:

/**
 * Ask server routines for add/edit a prueba into BBDD
 */
function savePrueba() {
	// take care on bool-to-int translation from checkboxes to database
    $('#pruebas-Cerrada').val( $('#pruebas-Cerrada').is(':checked')?'1':'0');
    // do normal submit
    $('#pruebas-form').form('submit',{
        url: '/agility/server/database/pruebaFunctions.php',
        method: 'post',
        ajax: true,
        onSubmit: function(param){
            return $(this).form('validate');
        },
        success: function(res){
            var result = eval('('+res+')');
            if (result.errorMsg){ $.messager.show({width:300, height:200, title:'Error',msg: result.errorMsg });
            } else {
                $('#pruebas-dialog').dialog('close');        // close the dialog
                $('#pruebas-datagrid').datagrid('reload');    // reload the prueba data
            }
        }
    });
}

Seems that form submit is not performed by mean of ajax call... but easyui doc says that ajax call is used by default since 1.4 version...
adding ajax:true to options doesn't affect result

So what am I doing wrong, ¿How can I generate this request header on _every_ server call?

Thanks in advance
Juan Antonio

Ok: i've finally isolated the problem and solved in a very dirty (but effective) way:

When I invoke $('#tt').panel('refresh',page), I load several elements:
- a main window (normally a datagrid)
- several auxiliar dialogs ( either forms, or subgrids)

These auxiliar dialogs are loaded in "closed" state, and activated by mean of linkbuttons from main datagrid window's toolbar.
When I want to change main window (and also related auxiliar dialogs), I invoke $('#tt').panel('clear'), that effectively clears.... main panel, not auxiliar dialogs.
So next load of same window and their slaves, gives DOM with duplicated entries... and thus are shown on rendering

This bug only affects auxiliar datagrid toolbars and footers. Other components are silently overwritten and works as expected

My dirty solution: provide and store a list of auxiliar dialogs to be cleared on next reload of main page:

Code:

/**
 * Load html contents from 'page' URL and set as contents on '#contenido' tag
 * @param page URL where to retrieve HTML data
 * @param title new page title
 * @param slaves list of dialogs to .clear() on next loadContents
 */
var slaveDialogs = new Object();

function loadContents(page,title,slaves) {
	$('#mymenu').panel('collapse');
	$.each(slaveDialogs,function(key,val) { alert(val); $(val).dialog('panel').panel('clear'); } ); 
	slaveDialogs = (slaves===undefined)? {} : slaves;
	$('#contenido').panel('clear');
	$('#contenido').panel('refresh',page);
	setHeader(title);
}

This code works fine, but requires a global variable, explicit list of dialogs to be cleared, and restricts auxiliar windows to be declared as dialogs.

Any ideas for a better solution?
Juan Antonio

Perhaps this question is related to mine:

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

Is the propossed solution still valid for latest easyui version ?

EDIT:
Just seen that latest easyui already implements .panel('clear').

So I changed my code:

Code:

....
<!--  CUERPO PRINCIPAL DE LA PAGINA (se modifica con el menu) -->
<div id="mycontent">
	<div id="contenido" class="easyui-panel" style="background:none" data-options="width:'100%',fit:true,border:false,"></div>
</div>
....

And:

Code:

function loadContents(page,title) {
	$('#mymenu').panel('collapse');
	$('#contenido').panel('clear');
	$('#contenido').panel('refresh',page);
	setHeader(title);
}

But still no luck. Code looks better and clean, but inner datagrid toolbars are duplicated on each reload

Hi all!
I have a problem related with loading inner html content

My imdex.html page has a menu that in turn invokes $('#content').load(requestedPage);
Where "requestedPage" loads from server several easyui based windows, datagrids, and so:

Code:

/**
 * From main page:
 * .....
 * <div id="mycontent">
 *     <div id="contenido"></div>
 * </div>
 * ......
 * Load html contents from 'page' URL and set as contents on '#contenido' tag
 * @param page URL where to retrieve HTML data
 * @param title new page title
 */
function loadContents(page) {
	$('#mymenu').panel('collapse');
	$('#contenido').remove();
	$('#mycontent').html('<div id="contenido"></div>');
	$('#contenido').load(	
			page,
			{},
			function(response,status,xhr){
				if (status=='error') $('#contenido').load('/agility/client/frm_notavailable.php');
			}
		);
}

My problem comes with datagrid toolbars: when from the menu I load a previously loaded datagrid, toolbar appears duplicated
as seen at this image:


Looking at DOM tree, I can see that toolbar appears outside "mycontent" div, thus $('contenido').remove() has no effect, and next time I load page contents, a new toolbar with same id will be aggregated at the end of page... and displayed repeated on top of the datagrid

¿Any easy -and generic- way to solve this issue?
¿What's the right way to load an easyui-based subset of a page?

Thanks in advance
Juan Antonio

!Great! works fine
Thank you

Solved: just use:

Code:

		<div id="buttons" style="width:100%;display:inline-block">
			<span style="float:left;padding:5px">
				<a id="cancelBtn" href="#" class="easyui-linkbutton" 
					data-options="iconCls:'icon-cancel'" onclick="alert('Cancel')">Cancel</a>
			</span>
			<span style="float:right;padding:5px">
				<a id="doneBtn" href="#" class="easyui-linkbutton" 
					data-options="iconCls:'icon-ok'" onclick="$('#myWindow').window('close')">Done</a>
			</span>
		</div>

That is: add style="width:100%;display:inline-block" to button's <div> declaration

I'm trying to do multiple select on a (large) datagrid. To speedup data loading I use scrollview, but previous rows selection are lost when datagrid scrolls and retrieve new data ;-(

Is this the expected behaviour?
Any easy way to store/retrieve all selected row indexes with scrollview?

Thanks in advance
Juan Antonio

I have a datagrid with toolbar buttons inside a window, and want to get my buttons left and right aligned inside the toolbar

Based on your example code, I wrote thist test page:

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../lib/jquery-easyui-1.4.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../lib/jquery-easyui-1.4.1/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../lib/jquery-easyui-1.4.1/demo/demo.css">
<script type="text/javascript" src="../lib/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="../lib/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
</head>
<body>

	<div id="myWindow" class="easyui-window" style="width: 600px; height: 200px" data-options="resizable:true">
	
		<!-- BOTONES DE ACEPTAR / CANCELAR DEL CUADRO DE DIALOGO -->
		<div id="buttons">
			<span style="float:left;padding:5px">
				<a id="cancelBtn" href="#" class="easyui-linkbutton" 
					data-options="iconCls:'icon-cancel'" onclick="alert('Cancel')">Cancel</a>
			</span>
			<span style="float:right;padding:5px">
				<a id="doneBtn" href="#" class="easyui-linkbutton" 
					data-options="iconCls:'icon-ok'" onclick="$('#myWindow').window('close')">Done</a>
			</span>
		</div>
	
		<table id="dg" class="easyui-datagrid"
			data-options="singleSelect:false,
				url:'../lib/jquery-easyui-1.4.1/demo/layout/datagrid_data1.json',
				method:'get',
				toolbar:'#buttons',
				fit:true">
			<thead>
				<tr>
					<th data-options="field:'itemid',width:80">Item ID</th>
					<th data-options="field:'productid',width:100">Product</th>
					<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
					<th data-options="field:'unitcost',width:80,align:'right'">Unit	Cost</th>
					<th data-options="field:'attr1',width:150">Attribute</th>
					<th data-options="field:'status',width:60,align:'center'">Status</th>
				</tr>
			</thead>
		</table>
	
	</div>
	
</body>
</html>

As you can see last rows of datagrid get's out of window, and cannot see them when scrolling datagrid
If I remove buttons toolbar, or remove left-right buttons alignment issues, last rows appears as expected
So, What am i doing wrong?

Thanks in advance
Juan Antonio

mmmhh.... some thing like:

Code:

<style>
/* rotacion de texto */
.datagrid-header-row td  {
	height:40px; /* need to be properly fixed */
	-webkit-transform: rotate(-90deg); /* Safari */
	-moz-transform: rotate(-90deg); /* Firefox */
	-ms-transform: rotate(-90deg); /* IE */
	-o-transform: rotate(-90deg); /* Opera */
	/* Internet Explorer */
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>

but, still needs some work in proper header cells width/height :-)

Good Job, thanks!

So I assume that your patch for 1.4.0 is no longer needed ¿right?
http://www.jeasyui.com/download/downloads/jquery-easyui-1.4-patch.zip

Juan Antonio

Ok. So my understanding is:
- declare datagrid with view:scrollview and pageSize
- declare a detailFormatter. This will make apperar expand button, and fill detail contents

Is this correct?

Thanks for your quick response
Juan Antonio

Is it possible use scrollview ( no pagination ) and detailview on the same datagrid?

if not, what's the right way to do?

Thanks in advance
Juan Antonio

This patch makes a bit of otimizing onBeforeRender() method for groupview.js. Instead of iterate group list to check for previous group declaration in every row, uses an associative array and typeof'ng group existence to get group index

Still working in rendering performance
Juan Antonio

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