1. Home
  2. Forum
  3. Vue
  4. How can I use ej2 from plain javascript

How can I use ej2 from plain javascript

Can I get an example of a grid from ej2 use in a Vue application written in a pure javascript (not in TypeScript!)?



7 Replies
RS Rajapandiyan Settu Syncfusion Team May 28, 2020 01:58 PM UTC

Hi Zbyszek, 
  
Greetings from syncfusion support. 
  
Query #1: Can I get an example of a grid from ej2 use in a Vue application written in a pure javascript (not in TypeScript!)? 
  
Based on your query we suspect that you need to render a grid in javascript manner by using vue packages of syncfusion controls. We have prepared a simple grid with this, please refer the below code example and sample for more information. 
  
  
<html> 
  
<head> 
  <link rel='nofollow' href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css" /> --> 
  
  <!-- Vue library file --> 
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js" type="text/javascript"></script> 
<!-- EJ2 Vue es5 --> 
  <script src="node_modules/@syncfusion/ej2-vue-es5/scripts/ej2-vue.min.js" type="text/javascript"></script> 
</head> 
  
<body> 
  <div id="Grid"> 
</body> 
  
<script type="text/javascript"> 
  
  var data = [ 
    { 
      OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5), 
      ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye', 
      ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0 
    }]; 
// create a grid by javascript manner 
  var grid = new ej.grids.Grid({ 
    dataSource: data, 
    allowPaging: true, 
    allowGrouping: true, 
    columns: [ 
      { field: 'OrderID', headerText: 'Rendelés azonosító', textAlign: 'Right', width: 120, type: 'number' }, 
      { field: 'Discount', width: 140, headerText: 'Ügyfél-azonosító', type: 'string' } 
    ], 
    height: 260 
  }); 
  grid.appendTo('#Grid'); 
</script> 
  
</html> 
  
  
 
  
If we misunderstood your query then explain your requirement in detail. 
 
Regards, 
Rajapandiyan S 


ZS Zbyszek Swirski May 28, 2020 02:47 PM UTC

Thanks for the code, but this is not really what I wanted. 
I want this grid to be a Vue component, so to have HTML something like:

<div id="app">
    <ejs-grid ref='overviewgrid' id='overviewgrid' :dataSource="somedata"  :allowSelection='true' :allowSorting='true'
              height='600' rowHeight=38 :enableHover='false' :load='load'>
        <e-columns>
            <e-column field='a' :visible='true' headerText='Employee ID' :isPrimaryKey='true' width='130'></e-column>
            <e-column field='b' headerText='Employee Name' width='200' ></e-column>
        </e-columns>
    </ejs-grid>
</div>

and corresponding scripts. 
I have tried to implement a sample from your site, but this is based on TS and imports certain variables

RR Rajapandi Ravi Syncfusion Team May 29, 2020 12:03 PM UTC

Hi Zbyszek, 

Thanks for the update 

Based on your query we have prepared a sample of vue application in a pure Javascript. Please refer the below code example and sample for more information. 
 

<html> 
<head id="Head1"><title> 
              GRID DIALOG example 
</title> 

</head> 
<body> 

<!-- Begin: master div --> 
<div>    

    <!-- Essentail JS2 for Vue  (All components Styles) --> 
    <link rel='nofollow' href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css" /> 
     
    <style>  
        .disabled-checkbox {   
            pointer-events: none;   
            opacity: 0.5;   
        }   
    </style>  

    <!-- IE polyfill --> 
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script> 
    <!-- Automatically provides/replaces 'Promise' if missing or broken. (for IE) --> 
    

    <!-- Vue library file--> 
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js" type="text/javascript"></script> 
    <!-- Essential JS 2 for Vue  global script --> 
    <script src="https://cdn.syncfusion.com/ej2/ej2-vue-es5/dist/ej2-vue.min.js" type="text/javascript"></script> 

    <div id="app"> 
         

       <div style="margin-top: 20px;"> 
            <ejs-grid  
                id="grdComplianceVerifications"  
                ref="grdComplianceVerifications" 
                :data-source='complianceVerificationData' 
            > 
                <e-columns> 
                    <e-column field='OrderID' is-primary-key='true' width=100></e-column> 
                    <e-column field='CustomerID' header-text='Customer ID' width=100></e-column> 
                    <e-column field='OrderDate' header-text='Order Date' format='yMd' type='date' width=80></e-column> 
                    <e-column field='ShipName' header-text='ShipName' width=60></e-column> 
                    <e-column field='ShipCountry' header-text='ShipCountry' width=120></e-column> 
                </e-columns> 
            </ejs-grid> 
        </div> 
    </div> 

    <script> 

        Vue.use(ejs.grids.GridPlugin); 


        const complianceVerificationData = [  
    {  
      OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),  
      ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',  
      ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0  
    }];  

        let app = new Vue({ 
            el: '#app', 
            mounted: function() { 
                console.log('--mounted--'); 
            }, 
            data: function() { 
                return { 
                }; 
            }, 
            methods: { 
        }}); 

    </script> 


</div> 
<!-- end:master div --> 

</body> 
</html> 



Regards, 
Rajapandi R

ZS Zbyszek Swirski May 29, 2020 05:50 PM UTC

Great - it works great, we are getting closer to what I am asking for :) 
I have modified your code, but it still does not sort or select or filter 
Here is my code:
<!DOCTYPE html>
<html>
  <head id="Head1">
    <title> GRID DIALOG example </title>
  </head>
  <body>
    <!-- Begin: master div -->
    <div>
      <!-- Essentail JS2 for Vue  (All components Styles) -->
      <link rel='nofollow' href="https://cdn.syncfusion.com/ej2/bootstrap.css"
        rel="stylesheet" type="text/css" />

      <style>
        .disabled-checkbox {
          pointer-events: none;
          opacity: 0.5;
        }
      </style>

      <!-- IE polyfill -->
      <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
      <!-- Automatically provides/replaces 'Promise' if missing or broken. (for IE) -->
      <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>

      <!-- Vue library file-->
      <script
        src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"
        type="text/javascript"
      ></script>
      <!-- Essential JS 2 for Vue  global script -->
      <script
        src="https://cdn.syncfusion.com/ej2/ej2-vue-es5/dist/ej2-vue.min.js"
        type="text/javascript"
      ></script>

      <div id="app">
        <div style="margin-top: 20px;">
          <ejs-grid id="grd1" ref="grd1"
            :contextMenuItems="contextMenuItems" :data-source="mydata" :allowSorting="true"
            @click='alert("qq");' >
            <e-columns>
              <e-column field="OrderID" is-primary-key="true" width="100"></e-column>
              <e-column field="CustomerID" allowSorting="true" :allowFiltering="true" header-text="Customer ID" width="100" ></e-column>
              <e-column field="OrderDate" header-text="Order Date" format="yMd" type="date" width="80" ></e-column>
            </e-columns>
          </ejs-grid>
        </div>
      </div>

      <script>
        Vue.use(ejs.grids.GridPlugin);

        let app = new Vue({
          el: "#app",
          mounted: function () {
              this.createData();
          },
          data: function () {
            return {
              mydata: [],
              contextMenuItems: ["opt1", "opt2"],
            };
          },
          methods: {
              createData : function() {
                for (let i = 0; i < 10; i++) {
                      let newval = { OrderID: 1000 * i, CustomerID : "Cust" + i, OrderDate: new Date(8364186e5+1000000000*i)};
                      this.mydata.push(newval);
                }
              }
          },
        });
      </script>
    </div>
    <!-- end:master div -->
  </body>
</html>     



Attachment: griddialogexample_27d6d312.zip

RR Rajapandi Ravi Syncfusion Team June 3, 2020 12:00 PM UTC

Hi Zbyszek, 

We are happy to hear that our suggested solution was working with your end. 

From validating your provided example, we have found that you are using allowSorting and allowFiltering without hypen. To achieve your requirement please follow the below way to achieve your requirement. Please refer the below code example for more information.  

<ejs-grid id="grd1" ref="grd1" 
            :contextMenuItems="contextMenuItems" :allow-Filtering="true" :data-source="mydata" :allow-Sorting="true"   //with hypen 
            @click='alert("qq");' > 
            <e-columns> 
              <e-column field="OrderID" is-primary-key="true" width="100"></e-column> 
              <e-column field="CustomerID" allow-Sorting="true" :allow-Filtering="true" header-text="Customer ID" width="100" ></e-column> 
              <e-column field="OrderDate" header-text="Order Date" format="yMd" type="date" width="80" ></e-column> 
            </e-columns> 
          </ejs-grid> 

Regards,
Rajapandi R 


ZS Zbyszek Swirski June 7, 2020 01:01 PM UTC

Thank you! This is precisely what I wanted

RR Rajapandi Ravi Syncfusion Team June 8, 2020 06:16 AM UTC

Hi Zbyszek, 

We are happy to hear our suggested solution was working with your end. 

Please get back to us if you need further assistance. 

Regards, 
Rajapandi R 


Loader.
Up arrow icon