We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Lots of errors using demo sources from web

Thread ID:

Created:

Updated:

Platform:

Replies:

141371 Dec 7,2018 03:41 PM UTC Dec 11,2018 12:34 PM UTC Vue 3
loading
Tags: Data Grid
Natxo
Asked On December 7, 2018 03:41 PM UTC

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 [Syncfusion]
Replied On December 10, 2018 10:49 AM UTC

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-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'; 
</style> 
... 
 
 
 
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 
    }, 
... 
 
 
                                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. 
 
 
Please get back to us for further assistance. 
 
 
Regards, 
J Mohammed Farook 


natxo
Replied On December 10, 2018 03:10 PM UTC

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 [Syncfusion]
Replied On December 11, 2018 12:34 PM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;