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

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

Thread ID:

Created:

Updated:

Platform:

Replies:

145285 Jun 15,2019 08:33 PM UTC Jan 30,2020 04:39 AM UTC Vue 10
loading
Tags: Toast
Silvio
Asked On June 15, 2019 08:33 PM UTC

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 [Syncfusion]
Replied On June 17, 2019 10:29 AM UTC

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 


jan kowalski
Replied On January 18, 2020 02:15 AM UTC

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 [Syncfusion]
Replied On January 20, 2020 12:35 PM UTC

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


Indrajith Srinivasan [Syncfusion]
Replied On January 21, 2020 03:39 AM UTC

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
Replied On January 22, 2020 10:23 AM UTC

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 [Syncfusion]
Replied On January 23, 2020 06:45 PM UTC

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
Replied On January 25, 2020 01:06 AM UTC

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 [Syncfusion]
Replied On January 27, 2020 11:30 AM UTC

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 


jan kowalski
Replied On January 29, 2020 03:30 PM UTC

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 [Syncfusion]
Replied On January 30, 2020 04:39 AM UTC

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 


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