Thanks for that neat solution. Here's a slight modification to provide a brief fade-in.

Code:

<style>
  html { opacity:0; }
</style>
<script>
  $(document).ready(function() {
      document.getElementsByTagName("html")[0].style.opacity = 1;
      document.getElementsByTagName("html")[0].style.webkitTransition = 'opacity 1s 0s';
  });
 </script>

When drag and drop is enabled in a datagrid, how can you manipulate

Code:

$(sourceRow).draggable('proxy').removeClass('tree-dnd-yes').addClass('tree-dnd-no');

and

Code:

$(sourceRow).draggable('proxy').removeClass('tree-dnd-no').addClass('tree-dnd-yes');

in the datagrid events? (onDragEnter, onDragOver,OnBeforeDrop etc.)

For example, I have a datagrid with grouped rows. While it is not permitted to drop rows to a different group by default, the tick icon is still show rather than the red cross icon when dragging over targetRows in a different group.

Thanks Jarry

OOooops, forgot the #

Works fine.

[How do I invoke the various commands (bold, italic etc.)?]

I want to dispense with the static texteditor toolbar and replace it with a context menu.
I have used the following code to create a context menu.
I have three texteditor fields on my page with ids: 'te0' 'te1' and 'te2'

The javascript code:

Code:

$(document).ready(function () {
$(document).bind('contextmenu',function(e){
    var t = $(e.target).closest('.texteditor');
    e.preventDefault(); 
    $('#teMenu').menu('show', {
      left: e.pageX,
      top: e.pageY-20
    });
});

The simplified menu:

Code:

<div id="teMenu" class="easyui-menu" style="border-top-width: 1px; top: 1px; width: 435px;">
<a href="#" onclick="$('te0').texteditor('getEditor').texteditor('execCommand','bold');" class="easyui-menubutton" 
data-options="plain:true, hasDownArrow:false, iconCls:'icon-bold'"></a>
<a href="#" class="easyui-menubutton" data-options="plain:true, hasDownArrow:false, iconCls:'icon-italic'"></a>
<a href="#" class="easyui-menubutton" data-options="plain:true, hasDownArrow:false, iconCls:'icon-underline'"></a>
<a href="#" class="easyui-menubutton" data-options="plain:true, hasDownArrow:false, iconCls:'icon-removeformat'"></a>
&nbsp;|&nbsp;
<a href="#" class="easyui-menubutton" data-options="plain:true, hasDownArrow:false, iconCls:'icon-insertorderedlist'"></a>
<a href="#" class="easyui-menubutton" data-options="plain:true, hasDownArrow:false, iconCls:'icon-insertunorderedlist'"></a>
</div>

One of the text editor divs:

Code:

<div id="te0" fit="true" class="easyui-texteditor" title="TextEditor" data-options="header:'none' "/div>

My question is:
How do I invoke the various commands (bold, italic etc.)?

I tried including in the menu:

Code:

<a href="#" onclick="$('te0').texteditor('getEditor').texteditor('execCommand','bold');" class="easyui-menubutton" 
data-options="plain:true, hasDownArrow:false, iconCls:'icon-bold'"></a>

But it doesn't work

I have a full page layout with N, S, E, W and center easyui-layout regions.
I have a easyui texteditor in the center region.

I want to programmatically fade the opacity of the whole layout to opacity=0 but keep the Texteditor panel at opacity =1.

It is obviously inheriting the css values.
If I place a panel below the layout, my code works fine.

The layout panel (id=bg1) starts with the style="z-index:1;position:fixed;opacity: 1;"
When triggered it is faded as follows:  $("#bg1").stop().animate({ opacity: 0 }, 5000); // fades to transparent over 5 secs

The easyui-texteditor (id=bg2) starts with the style="z-index:2;position:relative;opacity: 1;"
When the background fade is triggered it is set to remain opaque as follows:  $("#bg2").stop().animate({ opacity: 1 }, 0); // set to fully opaque immediately.

Any clues how to manipulate the css to make the easyui-texteditor box remain visible? Many thanks

Can anyone help me to trace an error?

My page has a datagrid with a nested subgrid.

ERROR:
"Uncaught TypeError: Cannot read property of 'panel' of undefined"

This points to the following line in jquery.easyui.min.js:
return $.data(jq[0],"datagrid").panel.children("div.datagrid-pager");
AND
$(this).datagrid("getPager").pagination("loaded");

My datagrid has pagination, which works correctly.
My nested subgrid has pagination, which works correctly.

Any ideas what might be the problem?

Many thanks 

Hi

Tried using your web site in Chrome and Firefox and it doesn't seem to be working properly.
Demo and Documentation pages don't seem to work.

Thanks for adding the TextEditor extension.

There seems to be a problem with the font size function. It doesn't have any effect and is stuck to "size 2".
Not sure if this is deprecated in favour of point of pixel size???

A neat addition would also be View Source to toggle to html code. 

Tagbox is a really useful addition to the toolbox.
Thanks for your hard work and imagination.
Loving it.

If you are trying to combine data from two datasources into one datagrid or into one form, why don't you assemble your data using sql from your multiple datasources and combine it into a single json file?
Then load the data into your datagrid/form with distinct fields (some relating to datasource 1, some relating to datasource 2).
THen when you update/insert/delete, post the form variables to your controller, parse out the respective field values and do your CRUD operations to the 2 different tables/databases in your (Php) controller using the respective field values.

Does that make sense?

I have found a fix. It seems the datagrid needed a little coffee break to update.
I added a setTimeout

Code:

setTimeout(function(){$('#dg').datagrid('expandRow',_rowid)}, 500);

Now working fine.

I have a datagrid with subgrid.

It's along the lines of http://www.jeasyui.com/tutorial/datagrid/datagrid22.php

With a parent record row expanded, upon double-clicking a child record, a modal form is opened and when submitted, it saves, and reloads the parent datagrid.
I want it to re-select the parent record and expand the parent record.
Everything works fine except it will not expand the record.
Here's my code. I get the parent id from the form, and from that get the rowIndex.
I understand the method is:
$('#dg').datagrid('expandRow', rowIndex);

Code:

function updateRecordTask() {
 var _thisjobid = $('#idtaskformjob_id').combogrid('getValue');// GET job_id (parent record id) from Form
 $('#taskfm').form('submit', {
  url: url,
  onSubmit: function() {
  return $(this).form('validate');
  },
  success: function(result) {
  var result = eval('(' + result + ')');
  if (result.success) {
   $.messager.show({
	title: 'Success!',
	msg: result.msg
  });
  $('#taskdlg').dialog('close'); // close the dialog
  $('#dg').datagrid('reload'); // reload the user data
  $('#dg').datagrid('selectRecord', _thisjobid); //Select parent record with job_id
  var _rowid = $('#dg').datagrid('getRowIndex',_thisjobid); //Get rowindex of parent record with job_id

  $('#dg').datagrid('expandRow',_rowid); //NOT WORKING - Expand row with rowindex

 } else {
  $.messager.show({
   title: 'Error',
   msg: result.msg
  });
 }
}
});
}

Everything works except the expandRow method....
Any ideas why it won't expand the row?

Thanks

I mean a role-based user authentication system

i.e. register, login, change password
control access to apps/pages depending on user role

I have written my own script but curious to know what other users might use...

Hi everyone

Just wondering what systems you might use to provide secure access to your web applications using jeasyui?

I'm not quite ready to port my application to an MVC.

Any suggestions?

I have sussed it out.

To convert a comma-separated string in your database to an array for a multiple-type combobox, do as follows:

Javascript function to get the field values, convert them from a string to an array and correctly pass them to the combobox

Code:

function explodeArrayReviewers(data){
	var _StringReviewers = data.Reviewers;
	var _ArrayReviewers = _StringReviewers.split(",");
	$('#idformReviewers').combobox('setValues', _ArrayReviewers);
}

You call this js function from your form's onLoadSuccess event:

Code:

<form id="fm" method="post" novalidate data-options="onLoadSuccess: function(data){explodeArrayReviewers(data);}">

To Update or Insert these values after submitting your form, the combobox field will post an array.
To convert the array to a comma-separated string do as follows in your update/insert php file:

Code:

$ReviewersArray = $_POST['Reviewers'];
$Reviewers = implode(',', $ReviewersArray);

$sql = "UPDATE ...

DON'T USE THE METHOD I THOUGHT WAS A SOLUTION ABOVE, THIS IS THE WAY TO DO IT!