devexpressdashboarddevexpress-mvc

Change the DevExpress MVC Dashboard Default color palette


Im trying to customize the look and feel of DevExpress MVC Dashboard. I want to create a custom color palette to be used. Currently I was able to change the dashboard color scheme by the following code but I want to customize the default color palette.

//Set color scheme of dashboard
ASPxWebClientUIControl.GlobalColorScheme = "dark";

Also As per the DevExpress Documentation, Color Palette can be customized using the following event.

public event CustomPaletteWebEventHandler CustomPalette

How to implement this? I added the following code to the Global.asax.cs but the color palette did not change for new charts.

namespace Analytics {

public class MvcApplication : System.Web.HttpApplication {


    protected void Application_Start() {
        DashboardConfig.RegisterService(RouteTable.Routes);



        ColorPaletteConfig cpc = new ColorPaletteConfig();
        cpc.CustomPalette += new CustomPaletteEventHandler(this.OnMyEvent);

    }

    private void OnMyEvent(object sender, CustomPaletteEventArgs e)
    {
        //Set value to e.Palette =
        Color[] colors = { Color.AliceBlue, Color.BlueViolet, Color.DarkBlue};
        DashboardPalette p = new DashboardPalette(colors);

        e.Palette = p;
    }

    protected void Application_Error(object sender, EventArgs e) {
        Exception exception = System.Web.HttpContext.Current.Server.GetLastError();
        //TODO: Handle Exception
    }
}
}

My ColorPaletteConfig class

public class ColorPaletteConfig
{
    public event CustomPaletteEventHandler CustomPalette;

}

Solution

  • This can be done in the following way.

    Add the following code to Application_Start() of Global.asax.cs

    DashboardConfigurator.Default.CustomPalette += new CustomPaletteWebEventHandler(this.OnMyEvent);
    

    Add the following event handler to the Global.asax.cs

        protected void OnMyEvent(object sender, CustomPaletteWebEventArgs e)
        {
    
            List<Color> customColors = new List<Color>();
            customColors.Add(System.Drawing.ColorTranslator.FromHtml("#17a2b8"));
            customColors.Add(System.Drawing.ColorTranslator.FromHtml("#20c997"));
            customColors.Add(System.Drawing.ColorTranslator.FromHtml("#28a745"));
            customColors.Add(System.Drawing.ColorTranslator.FromHtml("#6610f2"));
            customColors.Add(System.Drawing.ColorTranslator.FromHtml("#6f42c1"));
            customColors.Add(System.Drawing.ColorTranslator.FromHtml("#dc3545"));
            DashboardPalette p = new DashboardPalette(customColors);
            e.Palette = p;
        }