EasyUI and JQueryUI Conflict on Resize

[melane]

Hi,

I have a project where I use EasyUI Datagrid (great stuff by the way), and I need to use Dialog from JqueryUI framework (because I need a dialog with form..).
When I import the JQueryUI library, I see a strange behavior on the EasyUI Datagrid Header Resize. If I try to manually resize the header, only the header cell is resized (the data cells for this column are not resized).

Note that the double click on the header cells separation works and will auto resize the column on the preferred size. The problem occurs when you try to resize by clilck and slid (manually defining the size of the column).

If I do not import JQueryUI library, then I confirm the resize columns feature of the datagrid is working fine. So I am guessing there must be a kind of conflict between both libraries, but I am not sure on how I could solve this issue. I created a small jsfiddle project to illustrate the issue : http://jsfiddle.net/melane/vmDP8/

Do you know how I could fix this?

Thanks,

Melanie

[stworthy]

Please prevent from using the dialog of jqueryui, use 'easyui-dialog' instead. Or disable the resizable feature for each columns.

[melane]

Well,

Thank you, but the question is more about learning on how I could solve this conflict. I am fairly new to jquery and I would like to know if there is a way to prevent this conflict. Is there is a way to override the resize method ?

Thanks

Melanie

[stworthy]

No better way to avoid this conflict. So if you want to use the resizable of jqueryui, you must disable the resizable of easyui.

[melane]

Hi,

How exactly can I disable the resizable of easyui ? It looks like this is a default feature of the datagrid as I did not set any resizable options. And when I add  resizable="false" option in the declaration of the datagrid, it does change anything, I can still change the size of the headers...

Thanks

[stworthy]

Set 'resizable:true' property for columns, just like this

Code:

<th field="firstname" width="50" resizable="false">First Name</th>

The best way to solve this issue is to use the 'easyui-dialog', please refer to http://jsfiddle.net/vmDP8/11/

[melane]

Great got it, thanks!

[pmjenn]

I was able to get around this problem by renaming the easy UI Resizable component to Resizable2. Of course, I also had to re-factor the dependencies for the new name. I'm not necessarily recommending this approach, but it has been working successfully in my project. The jQuery plug-ins use their resizable, and easy UI its resizable (albeit renamed) plug-in.

However, I agree with stworthy, unless you have no choice, you are better off picking one library or the other.

[ifcwlme]

Why EasyUI have to use same name as jQueryUI ? It is so annoying.
Why don't just add a prefix to all EasyUI's module name to solve the problem?

[ifcwlme]

The best way to solve this problem is use own copy of jquery for EasyUI and jQueryUi

Code:

	<script src="resources/jquery/jquery-1.11.3.min.js"></script>
	<script src="resources/easyui/jquery.easyui.min.js"></script>
	<script>
		var $easy = $.noConflict(true);
	</script>
	<script src="resources/jquery/jquery-1.11.3.min.js"></script>
	<script src="esources/jquery-ui/jquery-ui.min.js"></script>

Then use $ for jQueryUI's widget, $easy for EasyUI's components.