Lots of errors using demo sources from web

[Natxo]

I don't know if is missing install some more dependencies that are not described in documents, but using demo sources from documentation are full of errors.

Beginning for the basics:

• No icons references on documents. All samples for grid(for example) are missing icons. How to reference them?
  
• Most of samples use "import { data } from "./data-source"", But where can we use this data-source.js file for testing demos?
  

Others:

• Some error codes on building, for example:
  
• ...toolbarClick: function (args: ClickEventArgs) {...Having error in args: ^ ClickEventArgs...
  
• Others errors codes:
  
• ...((<any>this).$refs. ... What is this <any> means in code?

Is difficult to try to learn SyncFusion with inappropriate demos that are needed to help the user, not creating new problems and lot of waste of time investigating.

I think Syncfusion philosophy is great!! But need to check the products before users can use them.
I'm not an expert on Javascript, so this problems are difficult to advance for novice people.

[Mohammed Farook J]

Hi Natxo, 

 

Thanks for contacting Syncfusion support. 

 

Query :  No icons references on documents. All samples for grid(for example) are missing icons. How to reference them? 

 

We have analyzed your query and we suggest to refer to the below documentation for referring CSS in the grid, 

 

Code Example: 

 

... 

<style> 

  @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css"; 

  @import '../node_modules/@syncfusion/ej2-base/styles/material.css';   

@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';   

@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';   

@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';   

@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';   

@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; 

@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css"; 

</style> 

... 

 

 

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/getting-started/#adding-css-reference  

 

Query  #2:  Most of samples use "import { data } from "./data-source"", But where can we use this data-source.js file for testing demos? 

 

We have analyzed your query and we have prepared a simple sample by importing datasource from a js file. Please refer to the below sample for your reference, 

 

Code Example: 

 

... 

<template> 

  <div id="app"> 

    <ejs-grid :dataSource="data" :allowPaging= "true"> 

      <e-columns> 

        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column> 

        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column> 

        <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column> 

      </e-columns> 

    </ejs-grid> 

  </div> 

</template> 

 

<script> 

import Vue from 'vue'; 

import { GridPlugin, Page } from '@syncfusion/ej2-vue-grids'; 

import { data } from "./datasource" 

 

Vue.use(GridPlugin); 

export default { 

  data () { 

    return { 

      data: data 

    } 

  }, 

  provide: { 

    grid: [Page] 

  } 

} 

</script> 

... 

 

[datasource.js] 

... 

export 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 

    }, 

    { 

        OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6), 

        ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48', 

        ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1 

    }, 

    { 

        OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5), 

        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', 

        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0 

    }, 

    { 

        OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5), 

        ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce', 

        ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0 

    }, 

... 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/vueProject-936119158  

 

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/getting-started/#getting-started  

                                https://ej2.syncfusion.com/vue/documentation/grid/data-binding/#data-binding  

 

Query #3:  ..toolbarClick: function (args: ClickEventArgs) {...Having error in args: ^ ClickEventArgs... 

 

Please use the below line to import clickEventArgs if you are using vue.ts. 

 

... 

import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations'; 

... 

 

Query #3:  ...((<any>this).$refs. ... What is this <any> means in code? 

 

We have analyzed your query and ‘<any>’ keyword is used to type cast any object suitable to get key or values from its parent object. 

 

Documentation: https://www.typescriptlang.org/docs/handbook/basic-types.html  

 

Please get back to us for further assistance. 

 

 

Regards, 

J Mohammed Farook 

[natxo]

Thanks a lot for your effort to help me in this doubts.

I have read most of them before make my questions.

1- I had included the .css but none icons appears. I don't know could be the problem (all theme was ok)

2-Thanks for the datasource.js (could be interesting to upload on your documentation, or minimum, reference to a data.

3- I don't use vue.ts nor any typescript. I folloed your guide install Vue CLI3 and it give errors with the demo sources. I removed "args:" and ok.

4-I understand about <???> tags. I think that to follow better the code, you can update de demos to real data, best for copy/paste demos and if you want to remark you can comment below "// <any> Any value", to avoid make more mistakes and time to know what is giving errors.

Thanks

[Venkatesh Ayothi Raman]

Hi Natxo, 

Thanks for the update. 

Query #1:  I had included the .css but none icons appears. I don't know could be the problem (all theme was ok) 

We have analyzed your query and we suggest to install using the below command and then refer the below code instead of refer the individual CSS files. Since we have stored the all icons in ej2/base-library.   

Script: “npm i @syncfusion/ej2” 

Code Example: 

… 

<style>  

@import "../node_modules/@syncfusion/ej2 /material.css";  

</style> 

…  

 

If the issue still occurs, then please provide the below information for us to analyze the issue further, 

1. Please share the full grid code example.
2. Please reproduce the reported issue in the given sample.
3. Please share the issue reproducible sample.

Query  #2, #3, #4:    

We have logged “grid vue documentation improvements” as a documentation improvement task and it will be available in any of our upcoming releases. 

We appreciate your patience until then. 

 

Regards, 

Venkatesh Ayothiraman.