Create a Custom Control Detail Item

• Nov 23, 2023
• 4 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.

This topic applies to WinForms and ASP.NET WebForms applications only. For more information on how to implement the same scenario in ASP.NET Core Blazor applications, refer to the following topic: How to: Show a Custom Data-Bound Control in an XAF View (Blazor) - External Data.

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.Win or MySolution.Web 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 Web Forms application, set the ControlTypeName property of the newly created node to “DevExpress.Web.ASPxButton”. 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.

• To handle the Click event of the button added in the Application Model, add a new View Controller to the WinForms or ASP.NET Web Forms module project. If your solution does not contain this project, add the Controller to the application project. Subscribe to the ViewItem.ControlCreated event and replace the automatically generated code with the following.

  WinForms

  File:
  MySolution.Win\Controllers\ControlViewItemControllerWin.cs in solutions without the WinForms-specific module project. MySolution.Module.Win\Controllers\ControlViewItemControllerWin.cs(.vb) in solutions with the WinForms-specific module project.

  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 Web Forms

  File: MySolution.Module.Web\Controllers\ControlViewItemControllerWeb.cs(.vb).

  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
  

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