Treegrid styles not working in Vue component

[Mindaugas]

Hi,

I'm trying to implement TreeGrid in my Vue page, but no luck.

What I'm tried:

npm install @syncfusion/ej2-vue-treegrid

My page looks like: https://pastebin.com/Na4dYhwE

Result: http://prntscr.com/oyi6f3

It's look like styles are not included, but by Developer tools exists, how I understand:  http://prntscr.com/oyi6og

What I'm doing wrong?

[Manivannan Padmanaban]

Hi Mindaugas, 

Greetings from Syncfusion Support. 

Query: Treegrid styles not working in Vue component 

We suspect that the reported issue will occur when the css reference may not be added. In order to render the grid with proper css we have to import the styles in the App.vue file. Refer the below help documentation link, 

https://ej2.syncfusion.com/vue/documentation/treegrid/getting-started/?no-cache=1#adding-css-reference 

Kindly get back to us, if you need further assistance. We will be happy to assist you. 

Regards, 

Manivannan Padmanaban. 

[Farhad]

I have added the css files inside my app.scss.

But nothing is getting included in the build so the syncfusion vue component look styleless.

I also don't want to include those css files in my App.vue which also is not working.

[Pon Selva Jeganathan]

Hi Farhad , 

Greetings from Syncfusion Support.  

Query: Treegrid styles not working in Vue component  

We suspect that the reported issue will occur when the css reference might not be applied properly. Ensure that you use Css properly. Please refer the following 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';

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

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

</style>

 

Refer the below help documentation link,  

https://ej2.syncfusion.com/vue/documentation/treegrid/getting-started/?no-cache=1#adding-css-reference  

Sample Link:- https://www.syncfusion.com/downloads/support/directtrac/general/ze/GridUpdated676051072 

After following the above suggestions, still not satisfied, please share us the following details.  

1. Complete Tree Grid code example
2. If possible, reproduce the reported issue in the shared sample Or share the issue reproducible sample.
3. Share the details of your product version.

 

Regards, 

Pon selva