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

Does it work with vue cli 3 ??? (no is the answer I think)

Thread ID:

Created:

Updated:

Platform:

Replies:

140991 Nov 17,2018 10:55 AM UTC Nov 19,2018 08:36 AM UTC Vue 3
loading
Tags: Data Grid
Stefan de Vogelaere
Asked On November 17, 2018 10:55 AM UTC

I am trying out these vue components with the current vue cli 3.
I just created two simple projects. One with Typescript enabled, one without typescript.
I then added the Getting Started ejs-grid with some features.
Conclusion:
- in the typescript project data is renderer, but none of the features (sorting, paging, filtering, .. ) are working
- with no typescript, features are working, but css is not handled correctly, so that certain buttons are not rendered correctly
I would love to use the components but when even the getting started tutorials are not working, this gives little confidence.
For reference, I include the two projects I created.
If support could have a look at it to see what is wrong with it?

Attachment: vluecli3_41751771.zip

Madhu Sudhanan P [Syncfusion]
Replied On November 19, 2018 07:16 AM UTC

Hi Stefan, 

Thanks for contacting Syncfusion support. 

Query: In the typescript project data is renderer, but none of the features (sorting, paging, filtering, .. ) are working 

Currently injecting feature modules using Provide is not working properly and we have confirmed “Providers are not accessible in vue while using providers from vue-property-decorator” as bug. For now you can specify the provide using the Component decorator as follows. 


@Component({ 
  provide: { 
    grid: [Page, Sort, Filter, Group] 
  } 
}) 
export default class HelloWorld extends Vue { 
 . . . . .  


Query: with no typescript, features are working, but css is not handled correctly, so that certain buttons are not rendered correctly 
  
From Volume 3, 2018 release, we have segregated dependent component themes from the grid styles to reduce the style bundling size and hence we need to import/refer the dependent styles individually. Please refer the below dependent component styles used by grid.  
  
  
<style lang="css"> 
@import "../node_modules/@syncfusion/ej2-base/styles/material.css"; 
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css"; 
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css"; 
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css"; 
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css"; 
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css"; 
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css"; 
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css"; 
@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css"; 
</style> 
  

For your convenience we have also modified the typescript sample and the same can be downloaded from the below link. 


Regards, 
Madhu Sudhanan P 


Stefan de Vogelaere
Replied On November 19, 2018 07:41 AM UTC

Ok thanks. This sample seems to work!
I think it is necessary to change the documentation as well, certainly about the needed styles to be included and the handling of the `provide` modules.
Thanks for this!

Madhu Sudhanan P [Syncfusion]
Replied On November 19, 2018 08:36 AM UTC

Hi Stefan, 

Thanks for the suggestion. We will update our documentation with these changes and this will be refreshed in any of our upcoming releases. 

Regards, 
Madhu Sudhanan P  


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

or the page will be automatically redirected to 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

;