How to: Add a Button to a Detail View Using a Custom View Item

• Feb 24, 2022
• 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. Before using it, make sure the Action Container View Item and Control Detail Item approaches are applicable to your task.

Tip

A complete sample project is available in the DevExpress Code Examples database at https://supportcenter.devexpress.com/ticket/details/t137443/how-to-add-a-button-to-a-form-using-custom-view-item.

A View Item is a ViewItem class descendant. Alternatively, you can inherit from any of the built-in View Items XAF supplies. Refer to the View Items and How to: Implement a View Item topics for additional information on View Items.

This topic contains the following section:

• Create a WinForms-Specific View Item
• Create an ASP.NET-Specific View Item
• Add a New View Item on a Detail View
• Display a View Item on a Detail View

Create a WinForms-Specific View Item

In the WinForms Module project, create the ButtonDetailViewItemWin View Item and decorate it with the ViewItemAttribute to make this View Item appear in the Application Model‘s ViewItems node.

C#

using System;
using System.Windows.Forms;
using DevExpress.ExpressApp.Editors;
using DevExpress.ExpressApp.Model;
using DevExpress.ExpressApp;
// ...
public interface IModelButtonDetailViewItemWin : IModelViewItem { }

[ViewItemAttribute(typeof(IModelButtonDetailViewItemWin))]
public class ButtonDetailViewItemWin : ViewItem {
    public ButtonDetailViewItemWin(IModelViewItem model, Type objectType)
        : base(objectType, model.Id) {
    }
    protected override object CreateControlCore() {
        Button button = new Button();
        button.Text = "Click me!";
        button.Click += button_Click;
        return button;
    }
    void button_Click(object sender, EventArgs e) {
        throw new UserFriendlyException("Action from custom view item was executed!");
    }
}

VB.NET

Imports System
Imports System.Windows.Forms
Imports DevExpress.ExpressApp.Editors
Imports DevExpress.ExpressApp.Model
Imports DevExpress.ExpressApp
' ...
Public Interface IModelButtonDetailViewItemWin
Inherits IModelViewItem
End Interface

<ViewItemAttribute(GetType(IModelButtonDetailViewItemWin))> _
Public Class ButtonDetailViewItemWin
    Inherits ViewItem
    Public Sub New(ByVal model As IModelViewItem, ByVal objectType As Type)
        MyBase.New(objectType, model.Id)
    End Sub
    Protected Overrides Function CreateControlCore() As Object
        Dim button As New Button()
        button.Text = "Click me!"
        AddHandler button.Click, AddressOf button_Click
        Return button
    End Function
    Private Sub button_Click(ByVal sender As Object, ByVal e As EventArgs)
        Throw New UserFriendlyException("Action from custom view item was executed!")
    End Sub
End Class

Create an ASP.NET-Specific View Item

In the ASP.NET Module project, create the ButtonDetailViewItemWeb View Item and decorate it with the ViewItemAttribute to make this View Item appear in the Application Model’s ViewItems node.

C#

using System;
using DevExpress.ExpressApp.Editors;
using DevExpress.ExpressApp.Model;
using DevExpress.ExpressApp.Web;
using DevExpress.Web.ASPxEditors;
// ...
public interface IModelButtonDetailViewItemWeb : IModelViewItem { }

[ViewItemAttribute(typeof(IModelButtonDetailViewItemWeb))]
public class ButtonDetailViewItemWeb : ViewItem {
    public ButtonDetailViewItemWeb(IModelViewItem model, Type objectType)
        : base(objectType, model.Id) {
    }
    protected override object CreateControlCore() {
        ASPxButton button = new ASPxButton();
        button.Text = "Click me!";
        button.EnableClientSideAPI = true;
        button.Click += button_Click;
        return button;
    }
    void button_Click(object sender, EventArgs e) {
        WebWindow.CurrentRequestWindow.RegisterClientScript("ShowAlert", 
@"alert('Action from custom view item was executed!');");
    }
}

VB.NET

Imports System
Imports DevExpress.ExpressApp.Editors
Imports DevExpress.ExpressApp.Model
Imports DevExpress.ExpressApp.Web
Imports DevExpress.Web.ASPxEditors
' ...
Public Interface IModelButtonDetailViewItemWeb
Inherits IModelViewItem
End Interface

<ViewItemAttribute(GetType(IModelButtonDetailViewItemWeb))> _
Public Class ButtonDetailViewItemWeb
    Inherits ViewItem
    Public Sub New(ByVal model As IModelViewItem, ByVal objectType As Type)
        MyBase.New(objectType, model.Id)
    End Sub
    Protected Overrides Function CreateControlCore() As Object
        Dim button As New ASPxButton()
        button.Text = "Click me!"
        button.EnableClientSideAPI = True
        AddHandler button.Click, AddressOf button_Click
        Return button
    End Function
    Private Sub button_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

Add a new View Item on a Detail View

Metadata on the newly implemented View Item is available in the Application Model. You can add the View Item to the required Detail View as described in the How to: Create a Custom Control Detail Item topic.

Display a View Item on a Detail View

Display your button or any other View Items on a Detail View as described in the View Items Layout Customization topic.