Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Collapse]eXpressApp Framework
 [Expand]Fundamentals
 [Expand]Getting Started
 [Expand]Concepts
 [Expand]Design-Time Features
 [Expand]Functional Testing
 [Expand]Deployment
 [Collapse]Task-Based Help
  [Expand]Business Model Design
  [Expand]Application Model
  [Expand]Actions
  [Expand]Navigation
  [Expand]Views
  [Expand]List Editors
  [Expand]Property Editors
  [Expand]Templates
  [Expand]Filtering
  [Expand]Reporting
  [Expand]Dashboards
  [Expand]Scheduler and Notifications
  [Expand]Maps
  [Expand]Security
  [Expand]Workflow
  [Expand]Localization
  [Expand]Testing
  [Collapse]Miscellaneous UI Customizations
    How to: Add a Button to a Detail View Using Custom View Item
    How to: Add an XAF Mobile Custom Module
    How to: Adjust the Size and Style of Pop-up Dialogs (ASP.NET)
    How to: Adjust the Windows' Size and Style
    How to: Change an Application Logo and Info
    How to: Create a Custom Control Detail Item
    How to: Customize a Window Caption
    How to: Customize ASP.NET Layout Elements Using Custom CSS Classes
    How to: Customize Export Options of the Printing System
    How to: Customize the Conditional Appearance Module Behavior
    How to: Customize Window Status Messages
    How to: Enable High DPI Support in a WinForms Application
    How to: Implement a Custom Messaging Class
    How to: Include an Action to a Detail View Layout
    How to: Raise XAF Callbacks from Client-Side Events and Process these Callbacks on Server
    How to: Set Images and Captions for Enumeration Values
    How to: Show a Custom Window with an Embedded XAF View
    How to: Show a Custom Windows Form
    How to: Use a Custom Plugin in a Mobile Applications
    How to: Use a Custom Splash Screen
    How to: Use a DevExtreme Chart in a Mobile Application
    How to: Use Custom Themes in ASP.NET Applications
  Frequently Asked Questions
 [Expand]API Reference
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

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.

Show Me

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:

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

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

Expanded 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:

  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:

  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:

  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.

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

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

Expanded See Also

How would you rate this topic?​​​​​​​