The requested page is not available for the requested platform. You are viewing the content for Default platform.

How to: Create a Custom Control Detail Item

This article describes how to add a custom control to a Detail View. Use this approach when you need to place a custom control near a particular editor in a Detail View and the Action Container View Item approach is inappropriate.

Tip

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=T137193.

  • Invoke the platform-dependent Model Editor of MySolution.Module.Win, MySolution.Module.Web or MySolution.Module.Mobile project and locate the required Views | DetailView node. Add a IModelControlDetailItem node using the context menu invoked for the Items child node.

    HT_Add_Button2_1

  • In a WinForms application, set the IModelControlDetailItem.ControlTypeName property of the newly created node to "System.Windows.Forms.Button". In an ASP.NET application, set the ControlTypeName property of the newly created node to "DevExpress.Web.ASPxButton". In a Mobile application, set the ControlTypeName property of the newly created node to "DevExpress.ExpressApp.Mobile.MobileModel.Button". Set the Id property to "MyButton" and IModelViewItem.Caption - to "My Button".
  • Focus the Views | DetailView | Layout node. Right-click on an empty space to invoke the layout customization dialog, then place the newly-created control in the required location. For details on how to change the layout, refer to the View Items Layout Customization topic.

    HT_Add_Button2_2

  • Run the application to make sure that the button is added to the required Detail View.
  • Add a new View Controller to the WinForms, ASP.NET or Mobile module to handle the Click event of the button added in the Application Model. Subscribe to the ViewItem.ControlCreated event and replace the automatically generated code with the following.

    WinForms

    using DevExpress.ExpressApp;
    using DevExpress.ExpressApp.Layout;
    using DevExpress.ExpressApp.Win.Core;
    using System.Windows.Forms;
    // ...
    public class ControlViewItemControllerWin : ObjectViewController<DetailView, Contact> {
        protected override void OnActivated() {
            base.OnActivated();
            ControlViewItem item = ((DetailView)View).FindItem("MyButton") as ControlViewItem;
            if (item != null) {
                item.ControlCreated += item_ControlCreated;
            }
        }
        void item_ControlCreated(object sender, EventArgs e) {
            (((ControlViewItem)sender).Control as Button).Text = "Click me!";
            (((ControlViewItem)sender).Control as Button).Click += ButtonClickHandlingWinController_Click;
        }
        void ButtonClickHandlingWinController_Click(object sender, EventArgs e) {
            MessageBox.Show("Action from custom View Item was executed!");
        }
    }
    

    ASP.NET

    using DevExpress.ExpressApp;
    using DevExpress.ExpressApp.Layout;
    using DevExpress.ExpressApp.Web;
    using DevExpress.Web;
    // ...
    public class ControlViewItemControllerWeb : ObjectViewController<DetailView, Contact> {
        protected override void OnActivated() {
            base.OnActivated();
            ControlViewItem item = ((DetailView)View).FindItem("MyButton") as ControlViewItem;
            if (item != null) {
                item.ControlCreated += item_ControlCreated;
            }
        }
        private void item_ControlCreated(object sender, EventArgs e) {
            ASPxButton button = ((ControlViewItem)sender).Control as ASPxButton;
            if (button == null) return;
            button.ID = "MyButton";
            button.Text = "Click me!";
            button.Click += ButtonClickHandlingWebController_Click;
        }
        void ButtonClickHandlingWebController_Click(object sender, EventArgs e) {
            WebWindow.CurrentRequestWindow.RegisterClientScript(
                "ShowAlert", @"alert('Action from custom View Item was executed!');");
        }
    }
    

    Mobile

    using DevExpress.ExpressApp;
    using DevExpress.ExpressApp.Layout;
    using DevExpress.ExpressApp.Mobile.MobileModel;
    using System;
    //...
    public class ControlViewItemControllerMobile : ObjectViewController<DetailView, Contact> {
        protected override void OnActivated() {
            base.OnActivated();
            ControlViewItem item = ((DetailView)View).FindItem("MyButton") as ControlViewItem;
            if (item != null) {
                item.ControlCreated += item_ControlCreated;
            }
        }
        private void item_ControlCreated(object sender, EventArgs e) {
            Button button = ((ControlViewItem)sender).Control as Button;
            if (button == null) return;
            button.Text = "Click me!";
            button.OnClick = @"DevExpress.ui.notify({
                message: 'Action from custom View Item was executed!' 
            })";
        }
    }
    
  • Run the application to make sure that the information window appears when you click the newly created button.
See Also