Log In
[Expand]Welcome to DevExpress .NET Documentation
[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]Report Server
[Collapse]eXpressApp Framework
 [Expand]Getting Started
 [Expand]Design-Time Features
 [Collapse]Task-Based Help
  [Expand]Business Model Design
  [Expand]Application Model
    How to: Access Objects Selected in the Current View
    How to: Access the Master Object from a Nested List View
    How to: Create and Show a Detail View of the Selected Object in a Popup Window
    How to: Detect a Lookup List View in Code
    How to: Display a Detail View Directly in Edit Mode in ASP.NET and Mobile Applications
    How to: Display a List View as a Chart
    How to: Display a List View as a Pivot Grid Table and Chart
    How to: Display Several Views Side-by-Side
    How to: Hide Collection Properties in an Edit Mode Detail View for an ASP.NET Application
    How to: Implement a Singleton Business Object and Show its Detail View
    How to: Implement a View Item
    How to: Show a Custom Data-Bound Control in an XAF View (ASP.NET)
    How to: Show a Custom Data-Bound Control in an XAF View (WinForms)
  [Expand]List Editors
  [Expand]Property Editors
  [Expand]Scheduler and Notifications
  [Expand]Miscellaneous UI Customizations
  Frequently Asked Questions (FAQ)
 [Expand]API Reference
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

How to: Show a Custom Data-Bound Control in an XAF View (ASP.NET)

This example demonstrates how you can add a custom data-bound (data-aware) control to a View and display this View from the navigation in an ASP.NET XAF application. For demo purposes, in this example, you add the ASPxCardView control to the EFDemo application (installed to %PUBLIC%\Documents\DevExpress Demos 17.2\Components\eXpressApp Framework\EFDemoCodeFirst by default). However, you can use the same approach with any other custom control in your XAF application.


A similar example for WinForms is available in How to: Show a Custom Data-Bound Control in an XAF View (WinForms)

Expanded Create a Web Forms User Control

In the Solution Explorer, right-click the ASP.NET application project and choose the Add | New Item... to add the Web Forms User Control.

Add the necessary control, for example, ASPxCardView from the Toolbox to the designer, and customize the control as required.


You can also add the XafWebDesignDataSource component from the DX.17.2: XAF Web Data Sources toolbox group and then bind the control to this component. Use the ObjectTypeName property to specify the required business object type. This allows you to see the data columns in the designer and customize them as required. Actual data binding is performed further in code.

Expanded Bind the Control to Data Using Object Space

Close the designer, right-click the WebUserControl1.ascx file and choose View Code to edit the Web User Control code. Implement the IComplexControl interface and its IComplexControl.Setup method. In this method, you can access the Object Space by using the objectSpace parameter. Use the Object Space API to read the required data and then initialize the control's data source according to the control documentation. In the code below, the collection of DemoTask objects is assigned to the ASPxDataWebControlBase.DataSource property in the overridden OnInit method.


You can also use the application parameter to access certain Application Model settings using the XafApplication.Model property and customize the control accordingly.

Expanded Add a WebCustomUserControlViewItem View Item to a View

In the ASP.NET application project, double-click the Model.xafml file to start the Model Editor. Right-click the Views node and choose Add | DashboardView.

Set the Id property to TaskCardView.

Right-click the Views | TaskCardView | Items node and choose Add... | CustomUserControlViewItemWeb.

Set the Id property to TaskCardView, and the IModelCustomUserControlViewItemWeb.CustomControlPath property - to the file name of the custom Web User Control you created (for example, WebUserControl1.ascx).

As a result, the WebCustomUserControlViewItem View Item is added to TaskCardView


You can add the WebCustomUserControlViewItem View Item to any existing Detail View or Dashboard View instead of creating a new Dashboard View.

Expanded Create a Navigation Item that Shows the View with the Custom Control

Navigate to the NavigationItems | Items | Default | Items node. Right-click the Items node and select Add… | NavigationItem from the invoked context menu.

For the newly added node, in the IModelNavigationItem.View drop-down list, select the View you created earlier (TaskCardView).

Expanded Initialize the Control Settings using the Application Model Configuration

In a general scenario, this is an optional step. However, in this particular example, the ASPxCardView control is used. By default, it automatically generates columns based on all data source properties. This may cause issues if your persistent class exposes collection properties (for example, DemoTask.Contacts). You can set the ASPxCardView.AutoGenerateColumns property to false and create columns manually, based on the Application Model.

You can use a similar approach to specify visible columns or apply other custom settings from the Application Model for any control you use.

Run the ASP.NET application and click Task Card View in the navigation. The Card View bound to the DemoTask collection is displayed (see the image at the beginning of this topic).

Expanded See Also

Is this topic helpful?​​​​​​​