Ticket Q470346
Visible to All Users

Web - How to customize ActionContainerViewItem's Action height and width

created 12 years ago

Hello XAF Team,

In Web UI, how can I customize the height of actions in an action container view item (in detail views)?

I hope to increase the height of these actions, because their height looks too small.

Regards,
James

Answers approved by DevExpress Support

created 12 years ago (modified 6 years ago)

Hello James,

In versions 16.2+, we recommend that you accomplish this task through the action's CustomCSSClassName model property. See details in the Action Customization section of the How to: Customize ASP.NET Layout Elements Using Custom CSS Classes article. Take a look at an example of such a CSS class in the ASPxMenu - How to align items' text vertically ticket.

Other tasks, such as specifying a custom width, can be implemented on the server side. To change server-side control settings, handle the ActionBase.CustomizeControl event as described at How to: Customize Action Controls:

C#
using DevExpress.ExpressApp; using DevExpress.ExpressApp.Actions; using DevExpress.ExpressApp.Web.Templates.ActionContainers.Menu; using System.Web.UI.WebControls; namespace MainDemo.Module.Web { public class ViewController1 : ViewController<DetailView> { public ViewController1() { SimpleAction action = new SimpleAction(this, "MyAction12", "DetailViewActions"); action.CustomizeControl += Action_CustomizeControl; } private void Action_CustomizeControl(object sender, CustomizeControlEventArgs e) { SimpleActionMenuActionItem button = e.Control as SimpleActionMenuActionItem; if (button != null) { button.MenuItem.ItemStyle.Width = Unit.Pixel(300); } } } }

In previous versions, you can access and customize ActionContainerHolder as follows:

C#
public class ViewController2 : ObjectViewController<DetailView, Payment> { protected override void OnActivated() { base.OnActivated(); foreach (WebActionContainerViewItem viewItem in View.GetItems<WebActionContainerViewItem>()) { viewItem.ControlCreated += viewItem_ControlCreated; } } void viewItem_ControlCreated(object sender, EventArgs e) { ActionContainerHolder control = (ActionContainerHolder)((WebActionContainerViewItem)sender).Control; control.Menu.Height = 100; } protected override void OnDeactivated() { base.OnDeactivated(); foreach (WebActionContainerViewItem viewItem in View.GetItems<WebActionContainerViewItem>()) { viewItem.ControlCreated -= viewItem_ControlCreated; } } }

Note that it may be also required to increase the layout item's height during the layout customization via the Model Editor.

See Also
WinForms - How to customize ActionContainerViewItem's Action height and width.

    Comments (2)

      Thanks Anatol for your example code. It works!

      Anatol (DevExpress) 12 years ago

        You are welcome!

        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.