How to: Create a Custom Control Detail Item

• Feb 24, 2022
• 5 minutes to read

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 https://supportcenter.devexpress.com/ticket/details/t137193/how-to-create-a-custom-control-detail-item.

• 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.

  

• 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.

  

• 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

  C#

  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!");
      }
  }
  

  VB.NET

  Imports DevExpress.ExpressApp
  Imports DevExpress.ExpressApp.Layout
  Imports DevExpress.ExpressApp.Win.Core
  Imports System.Windows.Forms
  ' ...
  Public Class ControlViewItemControllerWin
      Inherits ObjectViewController(Of DetailView, Contact)
  
      Protected Overrides Sub OnActivated()
          MyBase.OnActivated()
          Dim item As ControlViewItem = TryCast(CType(View, DetailView).FindItem("MyButton"), ControlViewItem)
          If item IsNot Nothing Then
              AddHandler item.ControlCreated, AddressOf item_ControlCreated
          End If
      End Sub
      Private Sub item_ControlCreated(ByVal sender As Object, ByVal e As EventArgs)
          TryCast(CType(sender, ControlViewItem).Control, Button).Text = "Click me!"
          AddHandler TryCast(CType(sender, ControlViewItem).Control, Button).Click, AddressOf ButtonClickHandlingWinController_Click
      End Sub
      Private Sub ButtonClickHandlingWinController_Click(ByVal sender As Object, ByVal e As EventArgs)
          MessageBox.Show("Action from custom View Item was executed!")
      End Sub
  End Class
  

  ASP.NET

  C#

  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!');");
      }
  }
  

  VB.NET

  Imports DevExpress.ExpressApp
  Imports DevExpress.ExpressApp.Layout
  Imports DevExpress.ExpressApp.Web
  Imports DevExpress.Web
  ' ...
  Public Class ControlViewItemControllerWeb
      Inherits ObjectViewController(Of DetailView, Contact)
      Protected Overrides Sub OnActivated()
          MyBase.OnActivated()
          Dim item As ControlViewItem = TryCast(CType(View, DetailView).FindItem("MyButton"), ControlViewItem)
          If item IsNot Nothing Then
              AddHandler item.ControlCreated, AddressOf item_ControlCreated
          End If
      End Sub
      Private Sub item_ControlCreated(ByVal sender As Object, ByVal e As EventArgs)
          Dim button As ASPxButton = TryCast(CType(sender, ControlViewItem).Control, ASPxButton)
          If button Is Nothing Then
              Return
          End If
          button.ID = "MyButton"
          button.Text = "Click me!"
          AddHandler button.Click, AddressOf ButtonClickHandlingWebController_Click
      End Sub
      Private Sub ButtonClickHandlingWebController_Click(ByVal sender As Object, ByVal e As EventArgs)
          WebWindow.CurrentRequestWindow.RegisterClientScript( _
          "ShowAlert", "alert('Action from custom View Item was executed!');")
      End Sub
  End Class
  

  Mobile

  C#

  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!' 
          })";
      }
  }
  

  VB.NET

  Imports Microsoft.VisualBasic
  Imports DevExpress.ExpressApp
  Imports DevExpress.ExpressApp.Layout
  Imports DevExpress.ExpressApp.Mobile.MobileModel
  '...
  Public Class ControlViewItemControllerMobile
      Inherits ObjectViewController(Of DetailView, Contact)
      Protected Overrides Sub OnActivated()
          MyBase.OnActivated()
          Dim item As ControlViewItem = TryCast(CType(View, DetailView).FindItem("MyButton"), _
  ControlViewItem)
          If item IsNot Nothing Then
              AddHandler item.ControlCreated, AddressOf item_ControlCreated
          End If
      End Sub
      Private Sub item_ControlCreated(ByVal sender As Object, ByVal e As EventArgs)
          Dim button As Button = TryCast(DirectCast(sender, ControlViewItem).Control, Button)
          If button Is Nothing Then
              Return
          End If
          button.Text = "Click me!"
          button.OnClick = "DevExpress.ui.notify({ " & ControlChars.CrLf & _
              "message: 'Action from custom View Item was executed!' " & ControlChars.CrLf & _
          "})"
      End Sub
  End Class
  

• Run the application to make sure that the information window appears when you click the newly created button.