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

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 Implement Custom View Items topics for additional information on View Items.

This topic contains the following section:

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) {
        CreateControl();
    }
    protected override object CreateControlCore() {
        Button button = new Button();
        button.Text = "Click me!";
        button.Click += new EventHandler(button_Click);
        return button;
    }
    void button_Click(object sender, EventArgs e) {
        throw new UserFriendlyException("Action from custom view item was 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) {
        CreateControl();
    }
    protected override object CreateControlCore() {
        ASPxButton button = new ASPxButton();
        button.Text = "Click me!";
        button.EnableClientSideAPI = true;
        button.Click += new EventHandler(button_Click);
        return button;
    }
    void button_Click(object sender, EventArgs e) {
        WebWindow.CurrentRequestWindow.RegisterClientScript("ShowAlert", 
@"alert('Action from custom view item was executed!');");
    }
}

Create a Mobile-Specific View Item

  1. Follow the How to: Add an XAF Mobile Custom Module topic's first 4 steps to create a new Mobile custom module, and name it simpleButton.
  2. Modify the template.html file as shown below to create the dxButton widget:

    <script type="text/html" id="xet-dust-simpleButton">
         <div class="xet-simpleButton simpleButton" data-bind="style: $data.style, dxButton: $data, css: $data._classNames"></div> 
    </script>
    
  3. Create the dxButton's configuration in the widget.js file and handle the onClick event to display a text notification. The following code demonstrates how to do this:

    var componentInfo = {
        componentViewModel: (viewModel) => {
            var result = $.extend({}, viewModel);
            result.text = viewModel.text;
            result.type = "normal";
            result.onClick = function (e) {
                DevExpress.ui.notify("Action from custom view item was executed!");
            };
            return result;
        },
        defaults: {
            style: { /*width: "auto", height: "auto"*/ }
        }
    };
    DevExpress.ExpressApp.Mobile.updateComponentInfo("simpleButton", componentInfo);
    
  4. In MySolution.Module.Mobile | Editors folder, create a CustomComponent descendant that is used as a server-side wrapper for the dxButton widget, name it SimpleButton, and specify the widget's name in its Type property:

    using DevExpress.ExpressApp.Mobile.MobileModel;
    // ...
    public class SimpleButton : CustomComponent {
        public SimpleButton() {
            Type = "simpleButton";
        }
    }
    
  5. In the Mobile Module project, create the ButtonDetailViewItemMobile View Item and decorate it with the ViewItemAttribute to make this View Item appear in the Application Model's ViewItems node.

    using DevExpress.ExpressApp.Editors;
    using DevExpress.ExpressApp.Model;
    using System;
    // ...
    public interface IModelButtonDetailViewItemMobile : IModelViewItem { }
    
    [ViewItem(typeof(IModelButtonDetailViewItemMobile))]
    public class ButtonDetailViewItemMobile : ViewItem {
        protected override object CreateControlCore() {
            SimpleButton simpleButton = new SimpleButton();
            simpleButton["text"] = "Click me!";
            return simpleButton;
        }
        public ButtonDetailViewItemMobile(IModelViewItem model, Type objectType) : base(objectType, model.Id) { }
    }
    

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