Theme Selector

[Olman]

Hi,

I found an example showing a theme selector.

This selector works for most controls except the circular gauge.

The selector is a dropdownlist that loads various themes.

In the change event the link of the css is changed

Example:

<script type="text/javascript">

     function change(args) {

         var link = window.document.getElementsByTagName('link')[6]; //get the link of css file  

         console.log(link);

         var value = args.value; // get the dropdown value  

         console.log(value);

         $(link).attr('rel='nofollow' href', "/Content/ej/web/" + value + "/ej.web.all.min.css") // Change the theme  

     }

</script>

<ej:DropDownList ID="dp1" runat="server" ClientSideOnChange="change" DataTextField="Text" DataValueField="Value" />

The theme is applied for all controls except circular gauge.

I adjunt image that shows this situation.

How can I have theme selector on the gauge?.

Is there a function to do this?

Does gauge no support theming?

Thanks.

Attachment: gauge_a1c51d46.rar

[Swetha Babu]

Hi Olman,

Thank you contacting Syncfusion support.

We are able to reproduce the reported issue of theme not rendering in the gauge component. We are analyzing the reported issue and we will update you with further details on 9^th September, 2020.

Regards,
Swetha Babu 

[Swetha Babu]

Hi Olman,

Thank you for your patience.

We can set the theme for the Circular gauge using the "Theme" property. We should not set the background color when we set the theme as the priority of the Background property is more for the background style for the gauge rather than the Theme property. We suspect that you would have set the background color for the gauge in your application. So the theme is not supported in your application. However, we have created a simple web forms application to demonstrate the same and it can be downloaded from the following link.

https://www.syncfusion.com/downloads/support/directtrac/292826/ze/GaugeTheme799600259

In the above sample, we have rendered the simple circular gauge with the range and the theme as dark. We can set the dark theme by setting the "theme" property as "FlatDark" in the gauge. 

  

We have checked the theme change using the drop down list but we are facing some issue in it. However, we will check this and update you with further details on 16 September, 2020.

Regards,
Swetha Babu 

[Swetha Babu]

Hi Olman,

Thank you for your patience.

We have checked the themes in circular gauge with drop down list. The theme is not set in the control dynamically when the drop down value is changed. We have considered this as a bug and logged a defect report. We will include the fix for the reported issue in our 2020 Volume 3 release which is expected to be available by the end of September 2020.

Regards,
Swetha Babu

[Swetha Babu]

Hi Olman,

Thank you for your patience.

We can set the theme for the Circular gauge using the "Theme" property. We should not set the background color when we set the theme as the priority of the Background property is more for the background style for the gauge rather than the Theme property. We suspect that you would have set the background color for the gauge in your application. So the theme is not supported in your application. However, we have created a simple web forms application to demonstrate the same and it can be downloaded from the following link.

https://www.syncfusion.com/downloads/support/directtrac/292826/ze/GaugeTheme799600259

In the above sample, we have rendered the simple circular gauge with the range and the theme as dark. We can set the dark theme by setting the "theme" property as "FlatDark" in the gauge. 

  

We have checked the theme change using the drop down list but we are facing some issue in it. However, we will check this and update you with further details on 16 September, 2020.

Regards,
Swetha Babu 

[Sabari Anand Senthamarai Kannan]

Hi Olman,

Thank you for your patience.

We can set the theme to the circular gauge using the dropdown list by setting the theme value to the instance of the gauge and by calling the _setTheme(). We can change the theme of the circular gauge using the below code snippet. 

var circulargaugeObj = $("#CircularGauge1").data("ejCircularGauge"); 

circulargaugeObj.model.theme = themeValue; 

circulargaugeObj._setTheme(); 

circulargaugeObj.refresh(); 

We have created a simple web forms application to demonstrate the same and it can be downloaded from the following link.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/CirculargaugeTheme-575590056 

In the above sample, we have created a simple gauge with ranges and pointer. Also, we have added the drop-down to change the theme. We have used the _setTheme() method to set the theme to the gauge. Please let us know if the above sample meets your requirement.

Please let us know if you need any further assistance.

Regards, 

Sabari Anand