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

• Jul 08, 2021
• 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.

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 is 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 is 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 is 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 is executed!');")
    End Sub
End Class

Create a Blazor-Specific View Item

1. In the Blazor Module project, create a new Razor component and configure the DxButton component in it. Add the Create method that creates RenderFragment and handle the Click event.

   Razor

   @using Microsoft.JSInterop
   @using Microsoft.AspNetCore.Components.Web
   @using DevExpress.Blazor
   @inject IJSRuntime JSRuntime;
   
   <DxButton Text="Click me!" Click="Button_Click" />
   
   @code {
       async void Button_Click(MouseEventArgs e) {
           await JSRuntime.InvokeVoidAsync("alert", "Action is executed!");
       }
       public static RenderFragment Create() =>@<DxButtonRenderer />;
   }
   

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

   C#

   using DevExpress.ExpressApp.Blazor;
   using DevExpress.ExpressApp.Editors;
   using DevExpress.ExpressApp.Model;
   using Microsoft.AspNetCore.Components;
   using System;
   // ...
   public interface IModelButtonDetailViewItemBlazor : IModelViewItem { }
   
   [ViewItem(typeof(IModelButtonDetailViewItemBlazor))]
   public class ButtonDetailViewItemBlazor : ViewItem {
       public class DxButtonHolder : IComponentContentHolder {
           RenderFragment IComponentContentHolder.ComponentContent => DxButtonRenderer.Create();
       }
       public ButtonDetailViewItemBlazor(IModelViewItem model, Type objectType) : base(objectType, model.Id) { }
       protected override object CreateControlCore() => new DxButtonHolder();
   }
   

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 shown below:

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.