General Components Dock Panels Getting Started Web

Dock Panels. Web

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:

Add XAF ASP.NET Default Vertical Template Content
Implement Xafari.DockPanels.Web.IDockManagerHolder interface
Modify the content markup: add ASPxDockManager, WebActionContainer and ASPxDockZone components.

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";
  }
  //...
}

Public Class Global
  Inherits System.Web.HttpApplication
  '...
  Protected Sub Session_Start(ByVal sender As Object, ByVal e As EventArgs)
    '...
    WebApplication.Instance.Settings.DefaultVerticalTemplateContentPath = "~/DefaultVerticalTemplateContent.ascx"
  End Sub
  '...
End Class

dock_panels_21

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 : BaseXafPage, IDockManagerHolder
{
  //...
  public ASPxDockManager DockManager
  {
    get
    {
      var manager = this.TemplateContent as IDockManagerHolder;
      return manager == null ? null : manager.DockManager;
    }
  }
  //...
}

Public Partial Class Default
  Inherits BaseXafPage
  Implements IDockManagerHolder
  '...
  Public ReadOnly Property DockManager As ASPxDockManager
    Get
      Dim manager = TryCast(Me.TemplateContent, IDockManagerHolder)
      Return If(manager Is Nothing, Nothing, manager.DockManager)
    End Get
  End Property
  '...
End Class

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

public partial class DefaultVerticalTemplateContent : TemplateContent, IXafPopupWindowControlContainer, IDockManagerHolder
{
  public ASPxDockManager DockManager
  {
    get
    {
      return this.ASPxDockManager;
    }
  }
  //...
}

Public Partial Class DefaultVerticalTemplateContent
  Inherits TemplateContent
  Implements IXafPopupWindowControlContainer, IDockManagerHolder
  Public ReadOnly Property DockManager As ASPxDockManager
    Get
      Return Me.ASPxDockManager
    End Get
  End Property
  '...
End Class

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.

dock_panels_22

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.

dock_panels_23

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:

DefaultVerticalTemplateContent.ascx
DefaultVerticalTemplateContent.ascx.cs
Global.asax
Default.aspx.cs