Issues with vuetify & syncfusion

[Alessio Simoni]

Hi, I'm using various syncfusion components in my vuetify project.

I have some issues with vuetify tooltips and vuetify drawer.

Let me explain:

• In my syncfusion grid I have a column with a vuetify button wrapped in a vuetify tooltip (rendered trough syncfusion template), it works, but wen I click the button and get redirected to neavigation endpoint, te tooltip freezes on the page and stay there until I refresh the page...is there any way to fix this?
• The vuetify drawer (that hides and shows with a button) works fine in all the pages except the page where I have the syncfusion grid, where it hides but the page is not resized to fill the spece that the drawer was keeping befor gets hidden... how can I solve that?

Thanks!

[Alessio Simoni]

up

[Thavasianand Sankaranarayanan]

Hi Alessio, 

Thanks for contacting Syncfusion support. 

We have analyzed the problems you are facing, we suspect that the problem may be with the “Vuetify” component.  

Query 1 : the tooltip freezes on the page and stay there until I refresh the page 

Here you have mentioned the tooltip of the vuetify component freezes. So this may be the problem generated from the “Vuetify” component side, when integrating the vuetify component with Syncfusion Grid. This is why the tooltip freezes. So we suggest you to check with “veutify” for the problem. 

Query 2 : The vuetify drawer (that hides and shows with a button) 

We suspect that the problem arise due to some css override between the Syncfusion Grid and Vuetify component. So we suggest you to check for the override of css while intergrating these components. If so, then we suggest you to customize the styles based on your requirement. 

And also we need more details to further look into this and provide a solution and check for the problem is from Syncfusion grid or vuetify component. Could you please share a simple demo sample with the problems you are facing in your application. So that we could validate further and assist you on this scenario. 

Regards, 

Thavasianand S. 

[Alessio Simoni]

Hi, thanks for the suggestions!

I solved the drawer issue (it was related to the template used a column of the grid).

the tooltip problem, persists...

I tryied to replace vuetify v-tooltip with syncfusion tooltip (@syncfusion/ej2-vue-popups) but the problem persists...

this is the column of the grid that uses v-tooltip/syncfusion-popup:

<e-column

field="id_box"

headerText="EDIT"

:template="editTemplate"

:allowFiltering="false"

textAlign="Right"

>e-column>

in the editTemplate I have this:

< v-tooltip top>

< v-btn slot="activator" outline small icon @click="edit()">

< v-icon small>edit < v-icon>

< v-btn>

< span>Edit< span>

< v-tooltip>

    

and this is my edit() method:

edit () {

router.push('/edit/' + this.data.id_box);

}

when I click the button (wrapped in v-tooltip or syncfusion popover), the router navigate to the new view, but the tooltip remains on

the page and I cannot remove it...it stays there forever even if I navigate to a new page, the only way to remove it is to reload the page.

Any suggestion?

Thanks!

[Pavithra Subramaniyam]

Hi Alessio, 

 

Thanks for your update. 

 

Query : the router navigate to the new view, but the tooltip remains on the page and I cannot remove it 

 

We have prepared a sample to check the syncfusion grid component’s interference in the vuetify tooltip component during the destruction of the components, but we are unable to reproduce such kind of issue in the grid component side. So we would like you to verify it from the vuetify component for any errors. Please refer to the below sample for your reference, 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/grid-vutifyTooltip-1361268480  

 

Please get back to us for further assistance. 

 

Regards, 

Pavithra S. 

 

[Alessio Simoni]

thanks for your answer.

Your example works fine, but if you change the edit method to:

edit () {

router.push('/someurl')

}

you will see the problem.

when the routing starts and change the view, the tooltip stays there on the screen and does not disapper...

[Thavasianand Sankaranarayanan]

Hi Alessio, 

We have analyzed the reported problem. We could reproduce the problem during routing only when the template has the “Vuetify app”(v-app). If the template has a normal div, then the tooltip problem is not arising. So we suspect that the problem is with the Vuetify. We are attaching the sample with proper destroying of Vuetify tooltip with normal div for your convenience, please download the sample form the link below, 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/tocustomer-948048101 

We searched for the similar problem over the internet and found some general solutions involving the same problem you are facing and which could solve the problem you are facing. Please refer the general link for more information, 

General Link : https://stackoverflow.com/questions/47570513/how-to-disable-v-tooltip-when-user-click-outside 

Please get back to us if you need further assistance. 

Regards, 

Thavasianand S.