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. Image for the cookie policy date

Treegrid styles not working in Vue component


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?

3 Replies

MP Manivannan Padmanaban Syncfusion Team August 29, 2019 09:15 AM UTC

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, 

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

Manivannan Padmanaban. 

FA Farhad July 21, 2020 09:29 AM UTC

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.

PS Pon Selva Jeganathan Syncfusion Team July 22, 2020 01:17 PM UTC

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. 


@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";


Refer the below help documentation link,  
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.
Pon selva  

Live Chat Icon For mobile
Up arrow icon