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

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

Reply | Reply with quote

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.

@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.

http://www.syncfusion.com/downloads/support/forum/140991/ze/vue-grid-ts-952087865

Regards,

Madhu Sudhanan P

Reply | Reply with quote

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!

Reply | Reply with quote

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

Reply | Reply with quote

Milan Michalec

Replied On August 29, 2019 03:21 PM UTC

thanks!

Reply | Reply with quote

Thavasianand Sankaranarayanan [Syncfusion]

Replied On August 30, 2019 05:36 AM UTC

Hi Stefan,

Thanks for your update.

We will update the documentation link once it get modified from our end.

Regards,

Thavasianand S.

Reply | Reply with quote

Mark

Replied On September 10, 2019 07:55 AM UTC

Really hoping this can be done soon. I'm evaluating and it took me 1 day mucking around before I found this thread. I was about to dump what seems to be a really good grid.

Even if the documentation notes that the extra styles need to be applied if using vue-cli 3 without the working examples that would be a great start.

Regards, Mark

Reply | Reply with quote

Thavasianand Sankaranarayanan [Syncfusion]

Replied On September 11, 2019 09:46 AM UTC

Hi Mark,

We have modified the documentation in our online in the following link.

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

Please let us know if you need further assistance on this.

Regards,

Thavasianand S.

Reply | Reply with quote

Mark

Replied On September 13, 2019 06:36 AM UTC

Great! Thanks Thavasianand.

Reply | Reply with quote

Thavasianand Sankaranarayanan [Syncfusion]

Replied On September 13, 2019 06:45 AM UTC

Hi Stefan,

Thanks for your update.

We are happy that the problem has been resolved at your end.

Regards,

Thavasianand S.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
140991	Nov 17,2018 10:55 AM UTC	Sep 13,2019 06:45 AM UTC	Vue	9

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US