Bug Report T1047202
Visible to All Users

Blazor - It is not possible to set a custom CSS class for actions in the ActionBase.CustomizeControl handler

created 3 years ago

Dear Support
How i can change background color of actions? I tried this solution: How to change the color of an action in XAF Blazor
But it doesn't work for me.
Another question, is it possible to change the background color of the detail view?

I'm attaching a sample project where I tried to change colors.

DXApplication2.Module.Blazor -> CustomizeActionsViewController.cs

Comments (1)
Anatol (DevExpress) 3 years ago

    Hello Twilk,

    I can see that XAF overrides the CssClass property in the DxToolbarItemSimpleActionControl class when it changes the action's Enabled state:

    C#
    protected override void SetEnabled(bool enabled) { base.SetEnabled(enabled); ToolbarItemModel.CssClass = enabled ? "xaf-action" : null; }

    So, this solution won't work in the current version. I asked our developers to review this issue. As a workaround, you can use a selector with the data-action-name attribute, as shown in the following ticket: How to change the style of buttons created by XAF's default actions?. Note that this attribute contains an action's Caption rather than its Id.

    Answers approved by DevExpress Support

    created 3 years ago (modified 2 years ago)

    We have addressed the issue described in this ticket and will include a fix in our next maintenance update. Should you need to apply our fix prior to official release, you can request a hotfix here.

    Note: Hotfixes may be unavailable for betas/updates set for release within a week.

    Additional information:

    The following code will work after the update:

    C#
    using DevExpress.ExpressApp; using DevExpress.ExpressApp.Actions; using DevExpress.ExpressApp.Blazor.Templates.Toolbar.ActionControls; namespace MainDemo.Module.Blazor.Controllers { public class TestViewController : ViewController { public TestViewController() { SimpleAction action1 = new SimpleAction(this, "Action1", "View"); action1.CustomizeControl += action1_CustomizeControl; } private void action1_CustomizeControl(object sender, CustomizeControlEventArgs e) { if(e.Control is DxToolbarItemActionControlBase control) { control.ToolbarItemModel.CssClass += " myTestClass"; } } } }

    For more information on CSS/theme customizations in XAF Blazor UI, please study the following concepts:

      Comments (2)

        Well done!

        C#
        public interface IeKolayBuActionModel: IModelNode { string CssClassNameEx { get; set; } } public void View_Action_CustomizeControl(object sender, CustomizeControlEventArgs e) { IeKolayBuActionModel _actionModel = Application.Model.ActionDesign.Actions[(sender as ActionBase).Id] as IeKolayBuActionModel; if (e.Control is DxToolbarItemActionControlBase control) { if (control.ActionId == "New") control.ToolbarItemModel.CssClass += " ekolaybu-button-green"; else if (_actionModel != null && !string.IsNullOrEmpty(_actionModel.CssClassNameEx)) { control.ToolbarItemModel.CssClass += " " + _actionModel.CssClassNameEx; } } }
        DevExpress Support Team 3 years ago

          Hello,

          I want to inform that in v21.2.4, it is possible to set a custom CSS class for an action in the Model Editor via the IModelActionBlazor.CustomCSSClassName property:

          Please refer to the following example:

          Thanks,
          Ilya P

          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.