Can you use Ej1 AND ej2 together?

[Janice]

I am building an application that uses the controls from EJ2. I have to build a menu that uses the menu control that is available in EJ1. Is there a way to implement both EJ1 and EJ2 in the same solution???

[Prince Oliver]

Hi Janice, 

Thank you for contacting Syncfusion forums. 

Yes, it is possible to use the both EJ1 and EJ2 controls in sample page. Make sure that you refer the scripts in the following order. 

<script src="//cdn.syncfusion.com/15.4.0.17/js/web/ej.web.all.min.js"></script> 

<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script> 

<script> 

$.extend(ej, Syncfusion) 

</script> 

We have prepared a EJ1 Menu sample along with EJ2 DropDownList control, kindly refer to the following Playground link: http://jsplayground.syncfusion.com/bmxohyur 

Note: Similar component from EJ1 and EJ2 platform cannot be used together. You need to choose the component in either EJ1 or EJ2 platform. 

Regards, 

Prince 

[Paul Kocher]

How would you do that with Angular?

[Prince Oliver]

Hi Paul,   

  

Thank you for contacting Syncfusion Support.   

  

We can use the EJ1 and EJ2 control in Angular platform too in similar way. Consider the following example,    

  

To use the DropDownLists from EJ2 along EJ1 Menu control in same page, first map the Syncfusion packages for EJ1 and EJ2 in the configuration file. 

    paths: { 

      // paths serve as alias 

      'npm:': 'node_modules/', 

     "syncfusion:": "node_modules/@syncfusion/", //** syncfusion alias ** 

    }, 

    // map tells the System loader where to look for things 

    map: { 

      // our app is within the app folder 

      app: 'src', 

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 

      // ej1 libraries 

      'syncfusion-javascript': 'npm:syncfusion-javascript', 

      'ej-angular2': 'npm:ej-angular2', 

      // ej2 libraries 

      '@syncfusion/ej2-base': 'syncfusion:ej2-base/dist/ej2-base.umd.min.js', 

      '@syncfusion/ej2-data': 'syncfusion:ej2-data/dist/ej2-data.umd.min.js', 

      "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", 

      '@syncfusion/ej2-inputs': 'syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js', 

      "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", 

      '@syncfusion/ej2-popups': 'syncfusion:ej2-popups/dist/ej2-popups.umd.min.js', 

      "@syncfusion/ej2-dropdowns": 'syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js', 

      '@syncfusion/ej2-ng-base': 'syncfusion:ej2-ng-base/dist/ej2-ng-base.umd.min.js', 

      "@syncfusion/ej2-ng-lists": "syncfusion:ej2-ng-lists/dist/ej2-ng-lists.umd.min.js", 

      "@syncfusion/ej2-ng-buttons": "syncfusion:ej2-ng-buttons/dist/ej2-ng-buttons.umd.min.js", 

      '@syncfusion/ej2-ng-dropdowns': 'syncfusion:ej2-ng-dropdowns/dist/ej2-ng-dropdowns.umd.min.js' 

    }, 

  

Next, Import EJ1 module and EJ2 DropDownList module into Angular application(app.module.ts) from the packages.   

import { EJAngular2Module } from 'ej-angular2'; 

import { DropDownListModule } from '@syncfusion/ej2-ng-dropdowns'; 

 

@NgModule({ 

  imports: [BrowserModule, FormsModule, HttpModule, EJAngular2Module.forRoot(), RouterModule.forRoot(rootRouterConfig, { useHash: true }),DropDownListModule ], 

  declarations: [AppComponent, HomeComponent, GridComponent], 

  bootstrap: [AppComponent] 

}) 

Now add the controls in the html page and bind the dataSource.   

[HTML] 

<h2>EJ1 - Menu</h2> 

<ej-menu id="menujson" [fields.dataSource]="localdata" [fields]="localfieldsvalues"></ej-menu> 

<h2>EJ2 - DropDownList</h2> 

<ejs-dropdownlist id='ddlelement' [dataSource]='data' width="200px" ></ejs-dropdownlist> 

[TS] 

@Component({ 

  selector: 'ej-app', 

  templateUrl: 'src/app.component.html', 

  styleUrls:['src/app.component.css','../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'], 

  encapsulation: ViewEncapsulation.None 

}) 

export class AppComponent { 

  public data: string[] = ['Snooker', 'Tennis', 'Cricket', 'Football', 'Rugby']; 

localdata: Array<any>; 

localfieldsvalues: Object; 

constructor() { 

  this.localdata = [ 

          { id: 1, text: 'Group A', parentId: null }, 

          { id: 2, text: 'Group B', parentId: null }, 

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  

          { id: 121, parentId: 25, text: 'Second Place' }, 

          { id: 122, parentId: 26, text: 'Third place' } 

      ]; 

  this.localfieldsvalues = { dataSource: this.localdata, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' }; 

} 

} 

We have attached the sample for your reference, please find the sample from the following location: http://www.syncfusion.com/downloads/support/forum/135141/ze/EJ1withEJ2-248671160  

Regards, 

Prince