easyui + bootstrap

[roberto]

Hi,

both are fantastic tools, but don't work together.
I found an article (https://www.ryadel.com/en/using-jquery-ui-bootstrap-togheter-web-page/) to solve a similar problem with jeasyui and bootstrap where the method tooltip exist in both but can have its name changed to uitooltip, por example, solving this conflict.
My problem start when I try to use any easyui code inside a bootstrap modal dialog.
Is there a (easy) way to solve this issue like in the mentioned article?

Tks

[jarry]

1. Use the 'noConflict' to let them work together.

Code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
	var $eui = $.noConflict(true);
</script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

2. Use the $eui to create the EasyUI components.

Code:

$(function(){
  $eui('#dd').tooltip({
    content: 'This is the tooltip message.'
  });
  $eui('#pp').panel({
    title:'easyui panel',
    width:400,
    height:100,
    content: 'panel'
  });
});

Here is the working example.
http://code.reloado.com/okocok3/edit#javascript,html,live

[roberto]

Tank you!
Just to be perfect: how to make the panel width 100%?

[jarry]

Set the panel with 'width' set to '100%' and then call 'resize' method after displaying the modal dialog.

Code:

$(function(){
  $eui('#pp').panel({
    title:'easyui panel',
    width:'100%',
    height:100,
    content: 'panel'
  });
  $('#exampleModal').on('shown.bs.modal', function(){
    $eui('#pp').panel('resize');
  })
});

[chorauoc]

Hi All,

I just thought i would add something here , because i used this method and it worked fine until i use the extension called datagrid-detailview?. When i try to use this the + sign does not appears in the data-grid and error msg appears as "undefined call" in datagrid-detailview.js file.

So here hw i resolve it (I thought to post this solution, because someone may face this issue)

I have find and replaces all $ with $eui only in datagrid-detailview.js file and i used files as below (note that extension js file has moved below to the JQUERY file)

Code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
	var $eui = $.noConflict(true);
</script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

//This newly update js goes to here
<script type="text/javascript" src="../javascript/datagrid-detailview.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

Hello, Admin jarry,

If you have another way of resolve this issue i would be really like to here it