How to Use EJ1 and EJ2 Controls Together in JavaScript?
Description:
To use EJ1 and EJ2 controls on the same page.
Solution:
EJ1 and EJ2 controls can be rendered in the same page by referring required scripts and css as follows
<head> <meta name="author" content="Syncfusion"> <title>Untitled</title>
<!-- EJ 1 theme reference --> <link rel="stylesheet" href="//cdn.syncfusion.com/16.3.0.29/js/web/flat-azure/ej.web.all.min.css" />
<!-- EJ 2 theme reference --> <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet"> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- EJ 1 script references --> <script src="//code.jquery.com/jquery-3.1.1.min.js"></script> <script src="//cdn.syncfusion.com/16.3.0.29/js/web/ej.web.all.min.js"> </script>
<!--EJ 2 script references --> <script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
<!--Extending the scripts --> <script> $.extend(ej, Syncfusion) </script>
</head> |
HTML:
<h2 > EJ 1 - Menu control </h2> <div class="content-container-fluid"> <div class="row"> <div class="cols-sample-area"> <ul id="menujson"> </ul> </div> </div> </div> <h2 > EJ 2 - DropDown control </h2> <div id="local-data" class="col-lg-6" style="padding-top:15px"> <div class="content"> <input type="text" id="games"> </div> </div> |
JS:
<script> var data = [ { id: 1, text: "Group A", parentId: null }, { id: 2, text: "Group B", parentId: null }, { id: 3, text: "Group C", parentId: null }, { id: 4, text: "Group D", parentId: null }, { id: 5, text: "Group E", parentId: null }, //first level child { id: 11, parentId: 1, text: "Algeria", sprite: "flag-dz" }, { id: 12, parentId: 1, text: "Armenia", sprite: "flag-am" }, { id: 13, parentId: 1, text: "Bangladesh", sprite: "flag-bd" }, { id: 14, parentId: 1, text: "Cuba", sprite: "flag-cu" }, { id: 15, parentId: 2, text: "Denmark", sprite: "flag-dk" }, { id: 16, parentId: 2, text: "Egypt", sprite: "flag-eg" }, { id: 17, parentId: 3, text: "Finland", sprite: "flag-fi" }, { id: 18, parentId: 3, text: "India", sprite: "flag-in" }, { id: 19, parentId: 3, text: "Malaysia", sprite: "flag-my" }, { id: 20, parentId: 4, text: "New Zealand", sprite: "flag-nz" }, { id: 21, parentId: 4, text: "Norway", sprite: "flag-no" }, { id: 22, parentId: 4, text: "Poland", sprite: "flag-pl" }, { id: 23, parentId: 5, text: "Romania", sprite: "flag-ro" }, { id: 24, parentId: 5, text: "Singapore", sprite: "flag-sg" }, { id: 25, parentId: 5, text: "Thailand", sprite: "flag-th" }, { id: 26, parentId: 5, text: "Ukraine", sprite: "flag-ua" }, //second level child {id: 111, parentId: 11, text: "First Place" }, { id: 112, parentId: 12, text: "Second Place" }, { id: 113, parentId: 13, text: "Third place" }, { id: 114, parentId: 14, text: "Fourth Place" }, { id: 115, parentId: 15, text: "First Place" }, { id: 116, parentId: 16, text: "Second Place" }, { id: 117, parentId: 17, text: "Third Place" }, { id: 118, parentId: 18, text: "First Place" }, { id: 119, parentId: 19, text: "Second Place" }, { id: 120, parentId: 20, text: "First Place" }, { id: 121, parentId: 21, text: "Second Place" }, { id: 122, parentId: 22, text: "Third place" }, { id: 123, parentId: 23, text: "Fourth Place" }, { id: 120, parentId: 24, text: "First Place" }, { id: 121, parentId: 25, text: "Second Place" }, { id: 122, parentId: 26, text: "Third place" } ]; $(function () { $("#menujson").ejMenu({ fields: { dataSource: data, id: "id", parentId: "parentId", text: "text", spriteCssClass: "sprite" } }); }); var list = [ { id: "1", empid: "cr1", text: "ListItem 1", value: "ListItem 1" }, { id: "2", empid: "cr2", text: "ListItem 2", value: "ListItem 2" }, { id: "3", empid: "cr3", text: "ListItem 3", value: "ListItem 3" }, { id: "4", empid: "cr4", text: "ListItem 4", value: "ListItem 4" }, { id: "5", empid: "cr5", text: "ListItem 5", value: "ListItem 5" }];
var games = new ej.dropdowns.DropDownList({ // set the local data to dataSource property dataSource: list, // map the appropriate columns to fields property fields: { text: 'text' }, // set the placeholder to DropDownList input element placeholder: 'Select an item', // set the height of the popup element popupHeight: '200px' }); games.appendTo('#games'); </script> |
Sample: https://jsplayground.syncfusion.com/2w2ja0yb
Similar component from EJ1 and EJ2 platform cannot be used together. You need to choose the component in either EJ1 or EJ2 platform.
Conclusion
I hope you enjoyed learning how to use EJ1 and EJ2 controls together in JavaScript.
You can refer to our JavaScript feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
