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

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

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 ?

10 Replies

KK Karthigeyan Krishnamurthi Syncfusion Team June 17, 2019 02:29 AM

Hi Silvio, 
 
Syncfusion greetings. 
 
Yes, we have prepared the below sample to change the theme based on the drop down selection in toolbar. 
 
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 



JK jan kowalski January 17, 2020 06:15 PM

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


IS Indrajith Srinivasan Syncfusion Team January 20, 2020 04:35 AM

Hi Silvio, 
  
Currently, we validating the reported issue, will update further details shortly.  
   
Regards,
Indrajith
 



IS Indrajith Srinivasan Syncfusion Team January 20, 2020 07:39 PM

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 



JK jan kowalski January 22, 2020 02:23 AM

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


IS Indrajith Srinivasan Syncfusion Team January 23, 2020 10:45 AM

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 



JK jan kowalski January 24, 2020 05:06 PM

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 :)


IS Indrajith Srinivasan Syncfusion Team January 27, 2020 03:30 AM

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); 
 

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

Regards, 
Indrajith 



JK jan kowalski January 29, 2020 07:30 AM

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


IS Indrajith Srinivasan Syncfusion Team January 29, 2020 08:39 PM

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 


Loader.
Live Chat Icon For mobile
Up arrow icon