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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Treegrid styles not working in Vue component

Thread ID:

Created:

Updated:

Platform:

Replies:

147000 Aug 28,2019 07:27 AM UTC Jul 22,2020 01:17 PM UTC Vue 3
loading
Tags: TreeGrid
Mindaugas
Asked On August 28, 2019 07:27 AM UTC

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 [Syncfusion]
Replied On 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. 

Regards, 
Manivannan Padmanaban. 


Farhad
Replied On 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.


Pon Selva Jeganathan [Syncfusion]
Replied On 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. 

<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,  
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  


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

Live Chat Icon For mobile
Live Chat Icon