Is it possible to change the built-in theme at runtime ?

[Silvio]

Hi 

I'm wondering if it's possible to change the current build-in theme at runtime using some commands on the toolbar.

I'd like to insert in my app's toolbar a dropdown button with all the build-in avalaible themes 

1. Google’s Material
2. Microsoft Office’s Fabric
3. Bootstrap
4. High Contrast

and when the user clicks one of them, the theme of the app changes according to the user choice.

Is it possible to implement such a command ?

[Karthigeyan Krishnamurthi]

Hi Silvio, 

 

Syncfusion greetings. 

 

Yes, we have prepared the below sample to change the theme based on the drop down selection in toolbar. 

https://codesandbox.io/s/vue-template-2ljsn 

 

template: Vue.component('DropDownListComponent', { 

            template: '<ejs-dropdownlist :dataSource="sportsData" :change="onTheamChange" ></ejs-dropdownlist >', 

            data() { return { sportsData: ['material', 'fabric', 'highcontrast', 'bootstrap'], }}, 

             methods: { 

            onTheamChange: function (e) { 

                var dropDownObj = document.querySelector('.e-dropdownlist').ej2_instances[0]; 

                if (dropDownObj.value === "material") { 

                    document.getElementsByTagName('link')[0].rel='nofollow' href = "https://cdn.syncfusion.com/ej2/material.css"; 

                } else if (dropDownObj.value === "fabric")  { 

                    document.getElementsByTagName('link')[0].rel='nofollow' href = "https://cdn.syncfusion.com/ej2/fabric.css"; 

                } else if (dropDownObj.value === "highcontrast") { 

                    document.getElementsByTagName('link')[0].rel='nofollow' href = "https://cdn.syncfusion.com/ej2/highcontrast.css"; 

                } else if (dropDownObj.value === "bootstrap") { 

                    document.getElementsByTagName('link')[0].rel='nofollow' href = "https://cdn.syncfusion.com/ej2/bootstrap.css"; 

                } 

            } 

        } 

          }) 

 

Regards, 

Karthi 

[jan kowalski]

hi guys

I'm trying to implement this solution in my project. everything works fine but I need a toast if something went wrong. for example, the browser does not support localstorage, where I save the selected theme. so I have a toolbar and dropdownlist in it as vue.component. where should I put <ejs-toast> and how to call it?. I try through this. $emit ('storage-error') in different places but it looks like the event is invisible to parent components. please help

[Indrajith Srinivasan]

Hi Silvio, 

  

Currently, we validating the reported issue, will update further details shortly.  

   

Regards,
Indrajith 

[Indrajith Srinivasan]

Hi Jan,

We have validated your reported query, you can render the toast using the Toast templates dynamically to show desired notifications. We have also prepared a sample based on your requirement.

 

Documentation: https://ej2.syncfusion.com/vue/documentation/toast/template/#template

Sample: https://codesandbox.io/s/vue-template-ln8zf

Can you please try out the above solution and let us know if you face any difficulties.

Regards, 

Indrajith 

[jan kowalski]

since I asked the question, I tried to find a solution myself. in general, the project is Razor Pages and I use cdn direct scripts on _Layout.cshtml page. I think I was able to solve the problem myself but I would like to ask you to evaluate if my solution is ok. I attach _Layout page only because it is all here and in the comments it is what I wanted to achieve

Attachment: _Layout_15961bfb.rar

[Indrajith Srinivasan]

Hi Jan 

 

We have checked the sample you have shared, some comments are added in the sample which are addressed below. 

 

Query 1: “Problem with spinner” 

 

Can you please share us the exact issue you are facing with the spinner. 

 

Query 2: “should it be here?” 

 

Yes, defining the toast component is right 

 

Where these above are comments which you want to evaluate. 

 

Could you please share us the following details to provide the solution at earliest. 

• If possible, please replicate your problem in a sample and return it to us.
• Share a video demo of your issue in your sample.

 

Regards, 

Indrajith 

[jan kowalski]

Hello Indrajith. 

Thank you for your attention. my main problem was to find out if the toast declaration through the tag helpers is correct as opposed to your declaration inside the Vue method 'this.toastObj = new Toast ({...}' now I know I can do it this way.

as for the spinner. I did not find a method to show the spinner while loading the css file. so I thought I could show it for example for 1 second to pretend to be busy. if you uncomment the spinner in 'mounted ()' and 'setUserPrefs ()' functions, you will see that the spinner shows up but does not want to disappear although it is given in the function 'setTimeout ()' after loading the page.

anyway thank you for help :)

[Indrajith Srinivasan]

Hi Jan, 

 

We are glad that the Toast issue is resolved, you can create it in the mounted to show and hide the spinner you can use the method showSpinner and hideSpinner from the ej2-popups package. I have also prepared a sample based on your requirement. 

 

import {  createSpinner, showSpinner, hideSpinner} from "@syncfusion/ej2-popups"; 

 

//Use this method to show the spinner 

showSpinner(document.getElementById("spinnerTarget"));

//Use this method to hide after certain time interval
setInterval(function() { 

    hideSpinner(document.getElementById("spinnerTarget")); 

}, 1000); 

 

Documentation:  https://ej2.syncfusion.com/vue/documentation/spinner/getting-started/ 

Sample: https://codesandbox.io/s/vue-template-wmn45 

Can you please try out the above solution and let us know if you face any difficulties. 

Regards, 

Indrajith 

[jan kowalski]

Hi Indrajith

now everything is fine. My mistake was that I connected Spinner to the main Vue App element '<div id = "vueappbody" v-cloak>' 

Now inside this element I created an additional '<div id = "spinnerTarget">' and connected Spinner to it in ' mounted 'event. 

everything works as it should :) Thank you very much for your help.

Regards,

jan

[Indrajith Srinivasan]

Hi Jan, 

 

We are glad to hear that the reported problem is resolved at your end. Kindly let us know, if you need further assistance on this.  

 

Regards, 

Indrajith