.NET Framework 4.5.2+
.NET Framework 4.5.2+
.NET Standard 2.0+
.NET Core 3.0+

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

  • 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 http://www.devexpress.com/example=T137443.

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.

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

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.

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

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.

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

    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 described in the How to: Create a Custom Control Detail Item topic.

HT_Add_Button3_1

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.

AddButtonViewItemToDetailView

See Also