FloatingPanel control

The FloatingPanel control allows the user to move the floating panel and its contents dynamically around the page. This control may be used with any content, including standard ASP.NET controls. The user may resize a floating panel, though this does not automatically modify the layout of the panel's contents. Note that some Web ADF controls already have a floating behavior and thus do not need to be embedded in a FloatingPanel. These include Navigation, Magnifier, and all task controls provided with the Web ADF. 

Assembly: ESRI.ArcGIS.ADF.Web.UI.WebControls.dll
Class: ESRI.ArcGIS.ADF.Web.UI.WebControls.FloatingPanel

Using the FloatingPanel control

1. Add the controls to the page
   
   Open or create a Web site within Visual Studio.NET.   Open a Web form in design mode, select the Toolbox and expand the ArcGIS Web Controls tab.  Drag and drop a FloatingPanel control onto the Web form. Resize the FloatingPanel control to be larger.
   
   You can add any controls or content inside the floating panel. Here, you'll add some text and a control. Click inside the FloatingPanel and add the text "This is a floating panel with a map". Then drag a Map control inside the FloatingPanel, just after the text. Resize the Map to fill the FloatingPanel. 
   
   Next, add a MapResourceManager control, which does not need to be inside the FloatingPanel. Add at least one resource to the MapResourceManager control, and set the MapResourceManager property of the Map control to the MapResourceManager you just added.
   
   This produces the following in Visual Studio.NET:
   
     
   
   When this page display, the user can move, collapse/expand, and resize the floating panel. Note that controls within the floating panel do not resize when the user resizes the floating panel.
   
2. Set FloatingPanel properties
   
   The FloatingPanel control functions without explicitly setting any of its properties. See the Properties section below for options in the properties of the control.
   

Members

Properties

The following tables provide a list of properties and events of interest.  For complete reference information, see the FloatingPanel control in the library reference section.

Property Name	Type	Description
AutoHide	bool	If true, the title bar and frame of the floating panel are hidden until the user hovers over the floating panel. The child controls are still displayed by default.
CloseButton	bool	Whether to display a close (x) button in the upper right of the floating panel. If false, the user cannot close the floating panel.
Docked	bool	Gets or sets the value indicating whether the panel will be an immediate child of the html document's body or whether it is docked in its parent.
DockingContainerElementID	string	Gets or sets the ID of the container that will be used to dock with.
Draggable	bool	Whether to allow the user to move the floating panel.
Expanded	bool	Whether to start up the page with the floating panel expanded. If false, the floating panel starts collapsed and displays only its title bar.
ExpandCollapseButton	bool	Whether to display a button in the title bar of the floating panel that allows users to collapse or expand the floating panel. If false, the user cannot expand/collapse the floating panel.
HeightResizable	bool	Gets or sets a value indicating whether the panel's height is resizable.
HelpUrl	string	The url to the help file displayed by the help button
ShowDockButton	bool	Gets or sets a value indicating whether the panel is able to be docked and undocked from its container.
ShowDockedContextMenu	bool	Gets or sets a value indicating whether the context menu is shown when the panel is docked.
ShowHelp	bool	Whether to show the help button
Title	string	Title text to display in the title bar of the floating panel.
TitleBarBackgroundImage	string	Gets or sets the URL of the image to be used when rendering the Title Bar.
TitleBarColor	Color	Color of the title bar of the floating panel.
TitleBarCssClass	string	Gets or sets the CSS Class to be used by the Title Bar.
TitleBarForeColor	Color	Gets or sets the foreground color (typically the color of the text) of the Web server control (inherited from WebControl).
TitleBarHeight	Unit	Gets or sets the value indicating the height of the Title Bar.
TitleBarSeparatorLine	bool	Gets or sets a value specifying whether to have a separator between the Title Bar and body of the panel.
Transparency	int	Value between 0 - 100 that represents a percentage of transparency for the floating panel and its contents.  A value of 0 means the floating panel is completely opaque and a value of 100 equals completely transparent.  Note that transparency only applies when the floating panel is being actively moved (dragged) on the page at runtime.
Visible	bool	Gets or sets a value that indicates whether a server control is rendered as UI on the page (inherited from Control).
WidthResizable	bool	Gets or sets a value indicating whether the panel's width is resizable.

Events

Event Type	Description
ContentsRendered	Occurs when the panel is rendered during the server-side rendering process. Does not occur on callbacks.
Hide	Occurs when the panel is hidden, when the user clicks the Close button or the panel is hidden by code.
PanelCollapsed	Occurs when any panel in the EditorTask is collapsed.
PanelExpanded	Occurs when any panel in the EditorTask is expanded.
Shown	Occurs when the panel is displayed within the page.

Discussion  

• Accessing controls by id within a FloatingPanel
  
  The System.Web.UI.Control class, from which all Web controls inherit, provides a FindControl() method to locate child controls within a parent control.  The System.Web.UI.Page class inherits from System.Web.UI.Control and thus exposes the FindControl() method.  The page itself contains a hierarchical structure of elements, where some controls are located within other controls.  The FloatingPanel control is designed to contain other controls.  As a result, using the FindControl() method to programmatically locate a control within a FloatingPanel requires you to get a reference to the FloatingPanel, then use FindControl() on the FloatingPanel to locate the control it contains.  In the following example, the Web page contains a Map control, a FloatingPanel control named "FloatingPanel1", and a Toc control named "Toc1" in the FloatingPanel.   It is assumed we have access to the Map control (reference variable named "map") and need to programmatically get a reference to the Toc.  Attempting to find the Toc control from the Map control will return a null reference.
  
  [C#]

  FloatingPanel floatingpanel = (FloatingPanel) map.FindControl("FloatingPanel1");
  Toc toc = (Toc)floatingpanel.FindControl("Toc1");
  

• Toggle FloatingPanel Visibility
  
  At runtime, the visibility of a FloatingPanel can be changed using Web ADF JavaScript available in the browser.  A callback to the Web application is not required .   JavaScript support for FloatingPanel capabilities in the browser is provided in the display_floatingpanel.js file.  By default, during application initialization this JavaScript file will be streamed to the client as an embedded resource.  The JavaScript file will only be available if a FloatingPanel resides in the page.
  
  The display_floatingpanel.js file contains a set of functions to change the visibility of a FloatingPanel at runtime.  The functions and what they accomplish are listed below.  Nearly all functions accept a single parameter, the unique client id of the FloatingPanel.
   

  JavaScript Function Name	Description
  showFloatingPanel	Show a floating panel
  hideFloatingPanel	Hide a floating panel
  toggleFloatingPanelVisibility	Show or hide a floating panel, changes to the opposite of a floating panels current state
  expandFloatingPanel	Expand a floating panel to view its content
  collapseFloatingPanel	Collapse a floating panel to hide its content while still displaying the title bar
  hideAllFloatingPanels	Hide all floating panels in the page (no parameter required)

  
  
  In the example code below, a Web page (*.aspx) contains a FloatingPanel and HTML input button.  At runtime, when the button is clicked it calls the toggleFloatingPanelVisibility JavaScript function and passes the FloatingPanel id ('MyFloatingPanel') to change visibility.  If the FloatingPanel is visible, it will be hidden.  If hidden, it will be made visible.  
  
  

  <esri:floatingpanel id="MyFloatingPanel" Width="200px" Height="200px" 
  BorderColor="Black" BorderWidth="2px" runat="server" 
  style="left: 111px; position: absolute; top: 60px"> </esri:floatingpanel>
   
  <input id="MyHTMLButton" type="button" value="HTML Button" 
  onclick="javascript: toggleFloatingPanelVisibility('MyFloatingPanel')" />
  
  

  
   
  
  If the visibility of the FloatingPanel needs to change during a callback to the Web ADF application, a custom CallbackResult can be used.  A discussion on CallbackResults and Web ADF controls is provided in the Working with AJAX capabilities in the Web ADFtopic.  In the example code below, a map action on the Map control in the browser has triggered a callback.  The map action is being handled by a custom tool in the Web application.   Since the callback response is being handled by the Map control, a custom CallbackResult to change the FloatingPanel visibility needs to be created and added to the Map controls callback results collection.  The following code, in the server action class for the custom tool, illustrates how to create the custom CallbackResult and add it to the Map control ('mapctrl') callback results collection. The custom CallbackResult includes a JavaScript call to the showFloatingPanel() function in the browser and passes the client id of the FloatingPanel ('MyFloatingPanel') to display.  This JavaScript call is executed when the callback response is returned to the browser and the Web ADF function processCallbackResult processes the callback results. 
  
  [C#]

  CallbackResult callbackresult = new CallbackResult(null, null, "javascript", "showFloatingPanel('MyFloatingPanel');");
  mapctrl.CallbackResults.Add(callbackresult);