Theming

[ManniAT]

Hi,

I just learned that it is not enough to include a theme-file to get controls themed.

<link rel='nofollow' href="~/lib/syncfusion-javascript/Content/ej/web/gradient-azure-dark/ej.web.all.min.css" rel="stylesheet" />

Although I had this file my Chart didn't change. But I found I out I could take:

<ej-chart id="container" can-resize="true" theme="@Syncfusion.JavaScript.DataVisualization.ChartTheme.GradientDark">

This is "almost matching".

But with the gauge I only have "dark / light" like this:

<ej-circular-gauge theme="@Syncfusion.JavaScript.Themes.FlatDark"

In the samples I found http://aspnetcore.syncfusion.com/circulargauge/default

When I choose gradient-azure-dark the gauge looks cool with gradient background and so.

But I can't find out how to achive this. This is done by "some magic function" which is not visible in the samples.

<ej-circular-gauge id="circulargauge1" is-responsive="true" load="loadGaugeTheme" background-color="transparent"

How can I have "gradient-azure-dark" on the gauge?
Why is there a function to do this?
Does gauge not supprot theming?

[Saravana Kumar Kanagavel]

Hi Manfred, 

 

Thanks for contacting Syncfusion Support. 

 

We have analyzed your query and currently we support two themes such as flat light and flat dark for Circular gauge. And in our SB sample we have just applied the background image and styles on selecting various themes and there will is no difference on gauge for flat dark theme and gradient azure dark theme.  

So we have prepared a gauge sample with same behavior as like in our sample browser based on your requirement and attached it in the below location 

Sample link  : http://www.syncfusion.com/downloads/support/forum/133158/ze/Sample-318900631 

  

Please find the output of the sample below 

 

Please let us know if you have any concern. 

Regards, 

Saravana Kumar K 

 

[ManniAT]

Hi Saravanah,

thank you for your fast answer and the sample.

I tried it - and it works - at least with dark full circle.
Light half circle also works - but for dark half circle the image is missing...

Anyhow - in simple words - gauge doesn't really support theming.
If I want this I have to build my own styles, add images.....

It simply works - dark or light.
To help you understand my questions - I migrate (for evaluation) a project from a competitor control suite to syncfusion.

With the "other suite" I just change a "theme css" and every control matches the look of the selected theme.

With your suite I have:
a.) Swap the theme css - makes most of the controls look different
b.) somehow change the Style="...." on the controls in the views (like with chart for an example)
c.) do ???? to make controls like gauges look "matching" to the selected theme.

While a is very simple
- b.) is a bit more difficult since I can't easily exchange things like style="@Syncfusion.JavaScript.DataVisualization.ChartTheme.GradientDark" to "something  matching the selected theme"...

And for c.) I see no solution than to provide a more or less complex "exchange script" with images, css files.....

To make the things easier for me:

Is there a matrix of your controls which shows controls supporting theming - those supporting it "somehow" (like chart) - and those not supporting it (like gauge)?

Thank you

Manfred

[Saravana Kumar Kanagavel]

Hi Manfred, 

 

Thanks for your update.  

 

Query #1:  I tried it - and it works - at least with dark full circle. Light half circle also works - but for dark half circle the image is missing 

 

Response: We will provide the image of half circle for dark theme on 16^th October,2017.  

 

Query #2: Anyhow - in simple words - gauge doesn't really support theming. 

 

Response: As of now most of the our components like chart, grid, etc supports full theme support and some of the controls like circular gauge , linear gauge, etc don’t have full theme support but you can customize the theme as a work around.  

 

Query #3:  I see no solution than to provide a more or less complex "exchange script" with images, css files..... 

 

Response: For some controls we have achieved theming support using the property.js file. You can use this file to customize the theme with respect to your requirement. If you have installed Essentila Studio build, then you can find the property.js file from below location. 

 

Location: C:\Users\XXX\AppData\Local\Syncfusion\EssentialStudio\15.1.0.33\ASP.NET Core\Web\samplebrowser\wwwroot\scripts  

 

Note that XX specifies the name you have installed in your machine. 

 

Query #4: Is there a matrix of your controls which shows controls supporting theming - those supporting it "somehow" (like chart) - and those not supporting it (like gauge)? 

 

Response:  we will prepare the brief document regarding theming support for all of our controls as soon as possible and also kindly revert us with the components you are using, so that we can provide you brief description about the theming support for those controls 

 

Please let us know if you have any concern. 

 

Regards, 

Saravana Kumar K. 

 

 

[ManniAT]

Hi Saravana,

just one thing left to say:

Outstanding perfect support!!!

Thank you

Manfred 

[Preethi Nesakkan Gnanadurai]

Hi Manfred,  

  

Most welcome. 

Please let us know if you need any assistance. 

  

Regards,  

Preethi