|
Title: EasyUI and JQueryUI Conflict on Resize Post by: melane on May 16, 2013, 08:01:13 PM 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 Title: Re: EasyUI and JQueryUI Conflict on Resize Post by: stworthy on May 17, 2013, 12:05:52 AM Please prevent from using the dialog of jqueryui, use 'easyui-dialog' instead. Or disable the resizable feature for each columns.
Title: Re: EasyUI and JQueryUI Conflict on Resize Post by: melane on May 17, 2013, 12:13:26 AM 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 Title: Re: EasyUI and JQueryUI Conflict on Resize Post by: stworthy on May 17, 2013, 12:19:38 AM No better way to avoid this conflict. So if you want to use the resizable of jqueryui, you must disable the resizable of easyui.
Title: Re: EasyUI and JQueryUI Conflict on Resize Post by: melane on May 17, 2013, 12:30:24 AM 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 Title: Re: EasyUI and JQueryUI Conflict on Resize Post by: stworthy on May 17, 2013, 12:50:52 AM 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/ Title: Re: EasyUI and JQueryUI Conflict on Resize Post by: melane on May 17, 2013, 12:56:38 AM Great got it, thanks!
Title: Re: EasyUI and JQueryUI Conflict on Resize Post by: pmjenn on June 14, 2013, 04:45:03 AM 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. Title: Re: EasyUI and JQueryUI Conflict on Resize Post by: ifcwlme on April 27, 2016, 10:45:34 PM 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? Title: Re: EasyUI and JQueryUI Conflict on Resize Post by: ifcwlme on April 27, 2016, 11:59:37 PM 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> Then use $ for jQueryUI's widget, $easy for EasyUI's components. |