The XAF default template content is not enough to use Xafari Dock Panels functionality in ASP.NET application. It is required to add XAF page content to the application project and make some modifications with it. This topic explains the following operations:

Open the existing XAF solution or create a new one. Right-click the ASP.NET application project and choose Add | New Item.... In the invoked Add New Item dialog, select the DevExpress XAF category and the DevExpress XAF ASP.NET Default Vertical Template Content item. Specify a name (e.g., "DefaultVerticalTemplateContent") and press Add.

To use the modified content instead of default, open the Global.asax.cs file and modify the Session_Start event handler. Specify a path to custom User Control as shown below.

 

    public class Global : System.Web.HttpApplication {

 ...

        protected void Session_Start(object sender, EventArgs e) {

         ...

            WebApplication.Instance.Settings.DefaultVerticalTemplateContentPath = "~/DefaultVerticalTemplateContent.ascx";

        }

 ...

    }

For more information, refer to the Template Customization and How to: Customize an ASP.NET Template topics.

Modify Default.aspx.cs file to implement Xafari.DockPanels.Web.IDockManagerHolder interface. The following code snippet demonstrates this.

 

public partial class Default : BaseXafPageIDockManagerHolder

{

 ...

 public ASPxDockManager DockManager

 {

         get

         {

                 var manager = this.TemplateContent as IDockManagerHolder;

                 return manager == null ? null : manager.DockManager;

         }

 }

 ...

}

 

Modify DefaultVerticalTemplateContent.ascx.cs file to implement Xafari.DockPanels.Web.IDockManagerHolder interface. The following code snippet demonstrates this.

 

 public partial class DefaultVerticalTemplateContent : TemplateContentIXafPopupWindowControlContainerIDockManagerHolder

 {

         public ASPxDockManager DockManager

         {

                 get { return this.ASPxDockManager; }

         }

         ...

 }

 

Next, modify the content markup in DefaultVerticalTemplateContent.ascx file.

Add ASPxDockManager component as follows:

 

<div class="VerticalTemplate BodyBackColor">

 ...

 <cc3:XafUpdatePanel ID="UPDM" runat="server" UpdatePanelForASPxGridListCallback="False">

         <dx:ASPxDockManager ID="ASPxDockManager" runat="server"></dx:ASPxDockManager>

 </cc3:XafUpdatePanel>

 ...

 

Add Panels WebActionContainer component as follows:

 

<div id="VerticalTemplateHeader" class="VerticalTemplateHeader">

    ...

    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="ACPanel">

        <tr class="Content">

            <td class="Content WithPaddings" align="right">

                <cc3:XafUpdatePanel ID="UPSHC" runat="server" UpdatePanelForASPxGridListCallback="False">

                    <cc2:ActionContainerHolder ID="SHC" runat="server"

                        ContainerStyle="Links" CssClass="TabsContainer" >

                        <ActionContainers>

                            <cc2:WebActionContainer ContainerId="Panels" IsDropDown="false" />

                            ...

 

Run application and see that now user can invoke any existing Dock Panel and close all.

But there are no places where the panels can be docked. Add ASPxDockZone component as follows:

 

<div class="VerticalTemplate BodyBackColor">

    ...

        <cc3:XafUpdatePanel ID="UPDockZone1" UpdatePanelForASPxGridListCallback="False" runat="server" width="100%" Height="100%" ScrollBars="Auto">

            <dx:ASPxDockZone ID="ASPxDockZone1" runat="server" Orientation="Horizontal" width="100%" Height="100%"/>

        </cc3:XafUpdatePanel>

    ...

 

Run application and see that now there is a place where the user may dock the panel.

You can view the code used in this lesson in the Web.App project files of the demo installed with Xafari Dock Panels. The modified files are listed below: