Changing theme on Gauge (radial ou linear)

3 posts, 1 answers
  1. Answer
    Pierre
    Pierre avatar
    212 posts
    Member since:
    Apr 2007

    Posted 20 Sep 2013 Link to this post

    I try to change the theme dynamically.

    I change the kendo.dataviz.(theme).min.css in the page
    then I call this
    var kendoElem = $elem.data('kendoRadialGauge');
    kendoElem.setOptions({ theme: 'moonlight'});
    kendoElem.redraw();

    The gauge redraw  but the color of the pin and text graduation do not change.

    Any suggestion?
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 23 Sep 2013 Link to this post

    Hello Pierre-D.,

    Basically all configuration options of Kendo UI Gauge are stored in the _originalOptions. You can change the theme from here (take a look at the code snippet below), however keep in mind this variable is intended for internal usage:
    //get reference to the Gauge widget
    var gauge = $("#gauge").data("kendoRadialGauge");
    //get the options
    var options = gauge._originalOptions;
    //set the new theme
    options.theme = "moonlight"
    //destroy the Gauge
    gauge.destroy();
    //recreate the gauge with the new theme
    $("#gauge").kendoRadialGauge(options);

    Regards,

    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Pierre
    Pierre avatar
    212 posts
    Member since:
    Apr 2007

    Posted 25 Sep 2013 Link to this post

    thanks for your help. All is working now.
Back to Top