BuyLog In
Bug Report T403377
Visible to All Users

Web Gauge Item - It is impossible to change a label color

created 9 years ago

Refer to the following code snippet demonstrating how to change a label's font. A custom font color is ignored if a red label is always shown.

JavaScript
function UpdateItems(s, e) {  
    if (e.ItemName.indexOf('gauge') >= 0) {  
        var gauges = e.GetWidget();  
        $.each(gauges, function (_, gauge) {  
            gauge.option('indicator.text.value', 'Test');  
            gauge.option('indicator.text.font', {  
                family: 'Zapf-Chancery, cursive',  
                weight: 400,  
                color: 'forestgreen',  
                size: 22  
            });  
        });  
    }  
}
Sign in to comment on this post

Answers approved by DevExpress Support

created 9 years ago

We have researched this problem and found the cause of the issue. In the gauge item the text color is applied using the CSS classes that override the font settings. To specify a custom text color it is necessary to clear the CSS class using the following code:

Code
function UpdateItems(s, e) {  
    if (e.ItemName.indexOf('gauge') >= 0) {  
        var gauges = e.GetWidget();  
        $.each(gauges, function (_, gauge) {  
            gauge.option('indicator.text.value', 'Test');  
            gauge.option('indicator.text.font', {  
                family: 'Zapf-Chancery, cursive',  
                weight: 400,  
                color: 'forestgreen',  
                size: 22  
            });  
            $(gauge.element).find('text.dx-carditem-negative-color').removeAttr('class');  
        });  
    }  
}
    Show previous comments (3)
    DevExpress Support Team 8 years ago

      I have attached a new version of the project bound to an Nwind.mdb MS Access database. This project is also converted to version 16.1.5.
      Note that if a certain project cannot be built on your machine because it requires a different control version, you can convert this project to your version as described in the Upgrade Notes help topic.

      PD PD
      Punitha Dharma 8 years ago

        Hello Constant,
        Thanks a lot . The project works fine I could see the code.
        I compared with my existing and it does not work.
        I thouroughly checked everything, there is no difference. but I had custome themes and I removed that also but still it does not works.
        the problem really comes from
        $(gauge.element).find('text.dx-carditem-negative-color').removeAttr('class');COuld you elaborate where would you find attribute ,

        Code
        text.dx-carditem-negative-color  
looks like it could not find that elemnt and hence the color was not overwritten.  

Any hint??  

Thanks in advance,  
PUnitha
        DevExpress Support Team 8 years ago

          It is unclear to me why this solution does not work in your example. Try using an alternative solution: instead of removing a class from a gauge item, it is possible to customize the default CSS classes to avoid color overriding. I have prepared a sample project demonstrating the suggested approach. You can find it in the attachment. Please check it and let me know your results.

          Sign in to comment on this post

          Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

          Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.