UltimatePanel Server-Side API
UltimatePanel is a web control for ASP.NET. You can drag and drop the control like any other web controls (server controls) onto your Web page in VS.NET, and provide a source for it. You have four options to set the source of your panel.
1. Set PanelSource to an XML file at design-time or run-time: You can create an XML file either by using UltimatePanelDesigner as your visual designer tool, or by manually authoring the file with the help of IntelliSense.
2. Set PanelSourceXml to an XML string at run-time: You can create your panel XML string programmatically by using XMLDocument object model. Sample code is provided with download.
3. Set DatabaseConnStr and DatabasePanelID at design-time or run-time: You can create a data source (in SQL server, Access or any other database by providing the connection string) either by using UltimatePanelDesigner, or by manually filling the tables (UltimatePanel, UltimatePanelGroup, UltimatePanelItem) in your database.
4. Set DataSource to a dataset at run-time: You can create a dataset from your data source easily by using ADO.NET. Sample code is provided with download.
Public properties may be changed at design-time as well as at run-time. All public properties except PanelSource, PanelSourceXml, DatabaseConnStr, DatabasePanelID, DataSource, Left, Top are also the attributes of the Panel element, and can be set in the XML file, string or table.
If public properties are set in XML file, at design-time and at run-time all at the same time, the order of precedence is run-time, design-time and XML file.
| PanelSource | XML file to load the UltimatePanel control from. |
| PanelSourceXml | XML string to load the UltimatePanel control from (run-time only). |
| DatabaseConnStr | Connection string to the database that has the UltimatePanel table. |
| DatabasePanelID | ID of the panel in the UltimatePanel table in the database. |
| DataSource | Dataset to load the UltimatePanel control from (run-time only). |
| Left | Absolute X-coordinate (horizontal) in pixels to populate the panel at. |
| Top | Absolute Y-coordinate (vertical) in pixels to populate the panel at. |
Your panel will be automatically located at the position where you place the UltimatePanel control on your web page. You can set the Left and Top properties to override the absolute position of your control at run-time. If you put the control into a table cell it will be positioned relatively. Therefore you can achieve both relative and absolute positioning by just dragging and dropping the control inside or outside a table.
Panel XML file has a simple hierarchy of Panel, Group, and Item elements where Panel is used for the top-level, Group is used for subpanels, and Item is used for the items inside the groups. You can find the XML schema in UltimatePanelSource.xsd.
Here is the list of attributes provided in the Panel, Group and Item elements:
| Panel | |
| Public Methods | |
| GetNavigationPath | This public method gets one required argument, PathDelimiter, and three optional arguments, DisplayItemsAsLinks, DisplayLastItemAsLink, LinkParameters, and returns the navigation path. This gives you the ability to display a navigation path to illustrate to the user his current position in the hierarchial panel structure. You can have the items in your navigation path as hyperlinks (breadcrumbs) by setting the DisplayItemsAsLinks argument to True. The last item that refers to the current page is by default only caption, but you can make it a link as well by setting the DisplayLastItemAsLink argument to True. You can also add additional parameters to your hyperlinks by setting the LinkParameters argument to a string such as "style='color:orange;' target='_blank'", which will affect all hyperlink items the same way. |
| SetItemAttribute | This public method gets item id, attribute name and attribute value, and changes the value of the specified attribute of the specified item. This gives you the ability to change your panel item attributes programmatically at run-time. |
| Panel Source | |
| ScriptPath | Virtual path for the scripts directory. Includes the following JavaScript files to be loaded at runtime based on the browser type. This way, page will be loaded with only the necessary JavaScript code, which makes the page load time and panel operations much faster. |
| ImagePath | Virtual path for the images directory. All the images used in the panel, sub panels and items will be searched under this directory. |
| CssFile |
Virtual path for the CSS file (.css) for the styles of toppanel, subpanels and
panel items. CSS class names used for the panel, subpanels and panel items will
be retrieved from this CSS file.
UltimatePanel.css under UltimatePanelDesigner is the default css file loaded when you open a new (blank) panel in UltimatePanelDesigner. This is a read-only file that is used as a common resource for every new panel. Therefore you should create your own css file for your panels. You can easily do this by just changing this property to a new filename and save it. |
| Panel Functionality | |
| EmbedCssFile | Boolean to embed the css file into HTML as static text or to add a dynamic link to the external css file. Default is set to True to embed the css file as static text. |
| BaseURL | Virtual path for the BaseURL to be added as a prefix to every ItemURL. Note that "/" is not required at the end of the virtual path. If omitted, UltimatePanel will handle it accordingly. Items may override this value if they have a URL property that starts with an absolute path starting with '/' or 'http://' or 'file://', or including a '\' in it. Also note that if the item has a URL starting with '~' it will automatically replace '~' with the application path. |
| CurrentUser | Current user logged into the system will only see the allowed items specified by the AllowedUsers property of an item. If CurrentUser is not specified it first checks CurrentUserSessionVar and then the current user from HttpContext. Then AllowedUsers property of each item will be checked. If AllowedUsers is not specified for an item it will be displayed. Otherwise it needs to include the CurrentUser in its comma-separated list of users and roles. |
| CurrentUserSessionVar | Session variable that holds the current user logged into the system. If you set this property to the session variable name that keeps the username the panel control will automatically retrieve the value of that session variable and set it to the CurrentUser property. |
| TargetFrame | Name of the target frame to open the web pages in. |
| HighlightPath | Boolean to highlight the selected item with different style and icons, and let the GetNavigationPath method return the navigation path as the captions of group header and selected item delimited by a character string that is passed as an argument. As the selected item and the navigation path are found by URL matching of items with the current page, you should provide unqiue URLs to your panel items. This feature doesn't work with frames because it is not possible to get the page info in another frame from the current page on server-side. |
| PathFindingMethod | Method to find the navigation path. It can be either MatchPathAndQuery or MatchPathOnly. Default is MatchPathAndQuery, which tries to match item's URL with the current page's URL including the path and the query string. MatchPathOnly discards the query string and tries to match only the path portion of item's URL with current page's URL. |
| SelectedItemID | ID of the selected item to override the automatic matching process handled by the UltimatePanel. If HighlightPath is True and SelectedItemID is left blank, UltimatePanel tries to find the selected item by using either MatchPathAndQuery or MatchPathOnly algorithms. However, if SelectedItemID has a value UltimatePanel will not attempt to find the selected item automatically but use this value as the selected item, and find the navigation path starting from this item and traversing the hierarchical panel up to the top. |
| DisableSelectedItem | Boolean to disable the selectem item. Default is True. If it is set to False the user can click on the item to refresh the current page. |
| GetNavigationPath | This public method gets one required argument, PathDelimiter, and three optional arguments, DisplayItemsAsLinks, DisplayLastItemAsLink, LinkParameters, and returns the navigation path. This gives you the ability to display a navigation path to illustrate to the user his current position in the hierarchial panel structure. You can have the items in your navigation path as hyperlinks (breadcrumbs) by setting the DisplayItemsAsLinks argument to True. The last item that refers to the current page is by default only caption, but you can make it a link as well by setting the DisplayLastItemAsLink argument to True. You can also add additional parameters to your hyperlinks by setting the LinkParameters argument to a string such as "style='color:orange;' target='_blank'", which will affect all hyperlink items the same way. |
| PanelOverlay | Boolean to make UltimatePanel open over select boxes such as dropdown boxes, list boxes, etc. Normally IE shows the select boxes over the subpanels that pop up while navigation the panel. If you set the PanelOverlay property to True it will open the select boxes. While doing this it will not hide the whole select box, but only partially hide the intersecting piece of the select box. |
| AutoScrollHorizontal | Boolean to automatically scroll the panel as the page is scrolled horizontally. |
| AutoScrollVertical | Boolean to automatically scroll the panel as the page is scrolled vertically. |
| AutoScrollTimeout | Frequency in milliseconds that the control checks whether the page has been scrolled or not. |
| SmoothTimeout | Frequency in milliseconds to scroll the panel by SmoothIncrement. |
| SmoothIncrement | Distance in pixels to scroll the panel at every SmoothTimeout. |
| MultiGroupOpen | Boolean to set whether the panel will only have a single group open at any time or have a mixture of open and closed groups. |
| GroupDrag | Boolean to make mobile groups inside a panel. The user will be able to drag and drop the groups to change their order. IE5+ only. |
| ClientPersistence | Boolean to save the user preferences on the client machine. The latest snapshot of the panel in terms of the group states (open or close) and their positions (for draggable groups) will be loaded automatically when the user revisits your website. If you set ClientPersistence property to True you have to make sure that the panel has a unique identifier not only on that web page but also across all web pages as the panel id is used to save and load the panel state on client's machine. IE5+ only. |
| AutoFillFrame | Boolean to set whether the panel will automatically fit into the frame it is located in. |
| GroupSlip | Boolean to set whether the groups will slip while opening or closing. |
| GroupSlipTimeout | Frequency in milliseconds to slip the group by GroupSlipIncrement. |
| GroupSlipIncrement | Distance in pixels to slip the group at every GroupSlipTimeout. |
| ShowHide | Boolean to make UltimatePanel show/hide with the use of an additional item. Default is False. |
| ShowHideOnClick | Boolean to make UltimatePanel show/hide when the additional item is clicked. Default is False. |
| ShowHidePosition | Left or right side of the browser window to show/hide UltimatePanel. Default is Left. |
| ShowTimeout | Duration in milliseconds before showing UltimatePanel. |
| HideTimeout | Duration in milliseconds before hiding UltimatePanel. |
| PanelSlip | Boolean to make UltimatePanel slip while showing and hiding. Default is False. |
| PanelSlipTimeout | Frequency in milliseconds to slip UltimatePanel by PanelSlipIncrement. |
| PanelSlipIncrement | Distance in pixels to slip UltimatePanel at every PanelSlipTimeout. |
| PanelOverlay | Boolean to make UltimatePanel open over select boxes while scrolling. Default is False. |
| ShowHideItemCaption | Caption of the additional item used to make UltimatePanel show/hide. |
| ShowHideItemImage | Image of the additional item used to make UltimatePanel show/hide. |
| ShowHideItemImageOver | Image of the additional item when the mouse is over it, which is used to make UltimatePanel show/hide. |
| ShowHideItemCssClass | CSS Class of the additional item used to make UltimatePanel show/hide. |
| ShowHideItemOverCssClass | CSS Class of the additional item when the mouse is over it, which is used to make UltimatePanel show/hide. |
| ShowHideItemVerticalAlign | Vertical align of the additional item used to make UltimatePanel show/hide, which can be Top, Middle or Bottom. Default is Middle. |
| Panel Appearance | |
| PanelWidth | Panel width in pixels. Default is 100. |
| GroupHeight | Default group height in pixels. If you don't set it to a value the control will automatically adjust the group height based on the items in it. |
| GroupSpacing | Distance between groups in pixels. Default is 10. Note that the space between groups will have the panel's CssClass. |
| PanelCssClass |
CSS class name for the panel. If it's left blank (UltimatePanel.css
file is used as the CssFile), UltimatePanel will be used as the default
CssClass, which is defined as:
.UltimatePanel { background-color:#ffffff; } |
| GroupHeaderCssClass |
CSS class name for the group headers when the group is closed. If it's left
blank (UltimatePanel.css file is used as the CssFile),
UltimatePanelGroupHeader will be used as the default CssClass, which is defined
as:
.UltimatePanelGroupHeader { background-color:#4284B5; color:#ffffff; font-family:Tahoma; font-size:10pt; font-weight:Bold; padding-left:3px; cursor:pointer; cursor:hand; } |
| GroupHeaderOpenCssClass |
CSS class name for the group headers when the group is open. If it's left blank
(UltimatePanel.css file is used as the CssFile),
UltimatePanelGroupHeaderOpen will be used as the default CssClass, which is
defined as:
.UltimatePanelGroupHeaderOpen { background-color:#4284B5; color:#ffffff; font-family:Tahoma; font-size:10pt; font-weight:Bold; padding-left:3px; cursor:pointer; cursor:hand; } |
| DisabledGroupHeaderCssClass |
CSS class name for the group headers when the group header item is disabled. If
it's left blank (UltimatePanel.css file is used as the CssFile),
UltimatePanelDisabledGroupHeader will be used as the default CssClass, which is
defined as:
.UltimatePanelDisabledGroupHeader { background-color:#4284B5; color:#a9a9a9; font-family:Tahoma; font-size:10pt; font-weight:Bold; padding-left:3px; cursor:default; } |
| GroupHeaderWidth | Width for the group header items. This value is applied to all group headers in the panel. You can give different widths to individual group headers by using the ItemWidth property of that particular group header. |
| GroupHeaderHeight | Height for the group header items. This value is applied to all group headers in the panel.You can give different heights to individual group headers by using the ItemHeight property of that particular group header. |
| GroupHeaderLeftIcon | Virtual path for the default icon on the left of the group header item when the group is closed. |
| GroupHeaderLeftIconOpen | Virtual path for the default icon on the left of the group header item when the group is open. |
| GroupHeaderLeftIconWidth | Width for the default icon on the left of the group header item. |
| GroupHeaderRightIcon | Virtual path for the default icon on the right of the group header item when the group is closed. |
| GroupHeaderRightIconOpen | Virtual path for the default icon on the right of the group header item when the group is open. |
| GroupHeaderRightIconWidth | Width for the default icon on the right of the group header item. |
| Default Group Appearance | |
| DefaultGroupCssClass |
Default CSS class name for the groups. If it's left blank
(UltimatePanel.css file is used as the CssFile), UltimatePanelGroup will
be used as the default CssClass, which is defined as:
.UltimatePanelGroup { border-style:solid; border-width:1px; border-color:#4284B5; background-color:#f6f6f6; } |
| DefaultDisabledItemCssClass |
Default CSS class name for the disabled items. If it's left blank
(UltimatePanel.css file is used as the CssFile), UltimatePanelDisabledItem
will be used as the default CssClass, which is defined as:
.UltimatePanelDisabledItem { color:#a9a9a9; font-family:Tahoma; font-size:8pt; margin-top:5px; padding-left:5px; cursor:default; } |
| Default Item Appearance | |
| SubgroupInitiallyOpen | Default boolean to initially open the subgroups of all items. Default is True. |
| SubgroupIndentLeft | Default horizontal distance between an item and its child nodes in pixels. Default is 10. |
| SubgroupExpandItemOnClick | Default boolean to expand/collapse the subgroups of all items when clicked. Default is True. |
| DefaultItemCssClass |
Default CSS class name for the items. If it's left blank
(UltimatePanel.css file is used as the CssFile), UltimatePanelItem will be
used as the default CssClass, which is defined as:
.UltimatePanelItem { color:#00009C; text-decoration:Underline; font-family:Tahoma; font-size:8pt; margin-top:5px; padding-left:5px; } |
| DefaultItemOverCssClass |
Default CSS class name for the items when the mouse is over the item. If it's
left blank (UltimatePanel.css file is used as the CssFile),
UltimatePanelItemOver will be used as the default CssClass, which is defined as:
.UltimatePanelItemOver { color:#630000; font-family:Tahoma; font-size:8pt; margin-top:5px; padding-left:5px; cursor:pointer; cursor:hand; } |
| DefaultItemSelectCssClass |
Default CSS class name for the items when they have the same URL as the current
page. If it's left blank (UltimatePanel.css file is used as the
CssFile), UltimatePanelItemSelect will be used as the default CssClass, which is
defined as:
.UltimatePanelItemSelect { color:#630000; font-family:Tahoma; font-size:8pt; margin-top:5px; padding-left:5px; cursor:default; } Note that this property is valid only if the HighlightPath property of the panel is set to True. |
| DefaultItemApplyCaptionOnly | Default boolean to apply the style and mouse events to caption only rather the whole item with all icons. Default is False. |
| DefaultItemNowrap | Boolean to make items wrap or not if the caption is bigger than the item width. Default is True, which means that items are not wrapped. |
| DefaultItemAlign | Default align type for the items. Possible values are Left, Center and Right. Default is Left. |
| DefaultItemOver | Default mouse over type for the items. Possible values are Item and Row. Item is used to trigger the mouseover event when the mouse is over the item, while Row is used for the whole row. Default is Item. |
| DefaultItemWidth | Default width for the items. |
| DefaultItemHeight | Default height for the items. |
| Default Icon Appearance | |
| DefaultLeftIcon | Virtual path for the default icon on the left of an item inside the groups when it has no children. |
| DefaultLeftIconClosed | Virtual path for the default icon on the left of an item inside the groups when it has children and it is closed. |
| DefaultLeftIconOpen | Virtual path for the default icon on the left of an item inside the groups when it has children and it is open. |
| DefaultLeftIconOver | Virtual path for the default icon on the left of an item inside the groups when the mouse is over it and it has no children. |
| DefaultLeftIconSelect | Virtual path for the default icon on the left of an item inside the groups when it has the same URL as the current page. Note that this property is valid only if the HighlightPath property of the panel is set to True. |
| DefaultLeftIconWidth | Width for the default icon on the left of the items. |
| DefaultRightIcon | Virtual path for the default icon on the right of an item inside the groups when it has no children. |
| DefaultRightIconClosed | Virtual path for the default icon on the right of an item inside the groups when it has children and it is closed. |
| DefaultRightIconOpen | Virtual path for the default icon on the right of an item inside the groups when it has children and it is open. |
| DefaultRightIconOver | Virtual path for the default icon on the right of an item inside the groups when the mouse is over it and it has no children. |
| DefaultRightIconSelect | Virtual path for the default icon on the right of an item inside the groups when it has the same URL as the current page. Note that this property is valid only if the HighlightPath property of the panel is set to True. |
| DefaultRightIconWidth | Width for the default icon on the right of the items. |
| DefaultAboveIcon | Virtual path for the default icon centered above the items inside the groups. |
| DefaultAboveIconOver | Virtual path for the default icon centered above the items inside the groups when the mouse is over them. |
| DefaultAboveIconSelect | Virtual path for the default icon centered above the items inside the groups when they have the same URL as the current page. Note that this property is valid only if the HighlightPath property of the panel is set to True. |
| DefaultAboveIconHeight | Height for the default icon centered above the items. |
| DefaultBelowIcon | Virtual path for the default icon centered below the items inside the groups. |
| DefaultBelowIconOver | Virtual path for the default icon centered below the items inside the groups when the mouse is over them. |
| DefaultBelowIconSelect | Virtual path for the default icon centered below the items inside the groups when they have the same URL as the current page. Note that this property is valid only if the HighlightPath property of the panel is set to True. |
| DefaultBelowIconHeight | Height for the default icon centered below the items. |
| Group | |
| Group Appearance | |
| Filter |
Filter effect type for open groups. IE5+ only.
Possible values are: None Transparent (adjusts the opacity) Opacity (opacity level between) 0 (fully transparent) and 100 (fully opaque) Rotation (adjusts the image rotation) Rotation (in ninety-degree increments) 0: Content is not rotated 1: Content is rotated 90 degrees 2: Content is rotated 180 degrees 3: Content is rotated 270 degrees DropShadow (creates a solid silhouette) Color (color in #AARRGGBB format) AA: alpha hexadecimal value RR: red hexadecimal value GG: green hexadecimal value BB: blue hexadecimal value) OffsetX (the offset value along the x-axis, in pixels. Positive values move the drop shadow to the right, and negative values move it to the left.) OffsetY (the offset value along the y-axis, in pixels. Positive values move the drop shadow down, and negative values move it up.) Gradient (displays a colored surface between the background and the content) GradientType (orientation of the gradient; possible values are 0, 1) 0: Displays a vertical gradient 1: Displays a horizontal gradient StartColor (initial opaque color, #AARRGGBB format) EndColor (final opaque color, #AARRGGBB format) Shadow (creates the illusion of a shadow) Direction (direction of the offset, in degrees) 0: Top 45: Top right 90: Right 135: Bottom right 180: Bottom 225: Bottom left 270: Left 315: Top left Color (final opaque color, #AARRGGBB format) Strength (distance, in pixels, that a filter effect extends) Default value for Filter is None. |
| Transition |
Transition effect type while opening groups. IE5+ only.
Possible values are: None Fade (reveals new content of the object by fading out the original content) Overlap (fraction of the transition's duration that both original and new content are displayed) Floating-point that can range from 0.0 to 1.0. GradientWipe (reveals new content of the object by passing a gradient band over the original content) GradientSize (percentage of the object that is covered by the gradient band) Floating-point that can range from 0.0 to 1.0. WipeStyle (orientation of the gradient) 0: vertical gradient 1: horizontal gradient Motion (indicates whether content is revealed as defined by the WipeStyle property setting, or in the opposite direction) Forward: New content is revealed in the direction set by the WipeStyle property Reverse: New content is revealed in the opposite direction than that set by the WipeStyle property Iris (reveals new content of the object with an iris effect, similar to the opening of a camera aperture) IrisStyle (shape of the Iris filter aperture) Circle: Circular aperture Cross: X-shaped aperture Diamond: Diamond-shaped aperture Plus: Plus sign-shaped aperture Square: Square aperture Star: Star-shaped aperture Motion (indicates whether new content is revealed from the outside or the inside first) Out: The transition moves from the center of the object toward the borders of the object In: The transition moves from the borders of the object toward the center Pixelate (Displays the content of the object as colored squares that take the average color value of the pixels they replace) MaxSquare (maximum width in pixels of a pixelated square) Integer that specifies or receives a width that can range from 2 to 50 pixels RandomDissolve (Reveals new content of the object by exposing random pixels) Duration (length of time the transition takes to complete) Floating-point that specifies the length of time to complete the transition. The value is specified in seconds.milliseconds format (0.0000). Default value for Transition is None. |
| Marquee |
Rotates the content inside the groups. IE5+ only. Behavior (sets how the text scrolls in the marquee) Scroll: Default. Marquee scrolls in the direction specified by the direction property. The text scrolls off the end and starts over. Alternate: Marquee scroll direction reverses when its content reaches the edge of the container. Slide: Marquee scrolls in the direction specified by the direction property. The text scrolls to the end and stops. Dir (sets the reading order of the object) LTR: Default. Content flows left to right. RTL: Content flows right to left. Direction (sets the direction in which the text should scroll) Left: Default. Marquee scrolls left. Right: Marquee scrolls right. Down: Marquee scrolls down. Up: Marquee scrolls up. Loop (sets the number of times a marquee will play) Default is -1. 0 and -1 loop infinitely. ScrollAmount (sets the number of pixels the text scrolls between each subsequent drawing of the marquee) Default is 6. ScrollAmountOver (sets the number of pixels the text scrolls between each subsequent drawing of the marquee when the mouse is over it) Default is 0, i.e. the marquee stops. ScrollDelay (sets the speed of the marquee scroll in milliseconds) Default is 85 milliseconds. Hspace (sets the horizontal margin for the object in pixels) Default is 0. Vspace (sets the vertical margin for the object in pixels) Default is 0. Width (sets the width of the marquee in pixels) No default. Height (sets the height of the marquee in pixels) No default. CssClass (sets the CSS class of the marquee) No default. Default value for Marquee is False. |
| HtmlContent | Html content to fill the group with. |
| Display | Group display type that can be set to InitiallyOpen, InitiallyClosed, AlwaysOpen or AlwaysClosed. Default is InitiallyOpen. |
| AdjustHeightOnItemClick | Boolean to automatically increase and decrease the group height as the user opens and closes the subgroups such as the tree nodes. This should be set to True when the items fit into the group area at initial opening. Otherwise it can't calculate the group height properly. Default is False. |
| HideScrollBars | Boolean to hide horizontal and vertical scrollbars on purpose. This should be set to True when you insert an UltimatePanel control into your group, which will pop up subpanels outside the panel area. Default is False. |
| GroupHeight | Height of the group in pixels. |
| GroupCssClass | CSS class name for the group. |
| DisabledItemCssClass | CSS class name for the disabled items. |
| Default Item Appearance | |
| DefaultItemCssClass | Default CSS class name for the items. |
| DefaultItemOverCssClass | Default CSS class name for the items when the mouse is over the item. |
| DefaultItemSelectCssClass |
Default CSS class name for the items when they have the same URL as the current
page.
Note that this property is valid only if the HighlightPath property of the panel is set to True. |
| DefaultItemNowrap | Boolean to make items wrap or not if the caption is bigger than the item width. Default is True, which means that items are not wrapped. |
| DefaultItemAlign | Default align type for the items. Possible values are Left, Center and Right. Default is Left. |
| DefaultItemOver | Default mouse over type for the items. Possible values are Item and Row. Item is used to trigger the mouseover event when the mouse is over the item, while Row is used for the whole row. Default is Item. |
| DefaultItemWidth | Default width for the items. |
| DefaultItemHeight | Default height for the items. |
| Default Icon Appearance | |
| DefaultLeftIcon | Virtual path for the default icon on the left of an item inside the groups when it has no children. |
| DefaultLeftIconClosed | Virtual path for the default icon on the left of an item inside the groups when it has children and it is closed. |
| DefaultLeftIconOpen | Virtual path for the default icon on the left of an item inside the groups when it has children and it is open. |
| DefaultLeftIconOver | Virtual path for the default icon on the left of an item inside the groups when the mouse is over it and it has no children. |
| DefaultLeftIconSelect | Virtual path for the default icon on the left of an item inside the groups when it has the same URL as the current page. Note that this property is valid only if the HighlightPath property of the panel is set to True. |
| DefaultLeftIconWidth | Width for the default icon on the left of the items. |
| DefaultRightIcon | Virtual path for the default icon on the right of an item inside the groups when it has no children. |
| DefaultRightIconClosed | Virtual path for the default icon on the right of an item inside the groups when it has children and it is closed. |
| DefaultRightIconOpen | Virtual path for the default icon on the right of an item inside the groups when it has children and it is open. |
| DefaultRightIconOver | Virtual path for the default icon on the right of an item inside the groups when the mouse is over it and it has no children. |
| DefaultRightIconSelect | Virtual path for the default icon on the right of an item inside the groups when it has the same URL as the current page. Note that this property is valid only if the HighlightPath property of the panel is set to True. |
| DefaultRightIconWidth | Width for the default icon on the right of the items. |
| DefaultAboveIcon | Virtual path for the default icon centered above the items inside the groups. |
| DefaultAboveIconOver | Virtual path for the default icon centered above the items inside the groups when the mouse is over them. |
| DefaultAboveIconSelect | Virtual path for the default icon centered above the items inside the groups when they have the same URL as the current page. Note that this property is valid only if the HighlightPath property of the panel is set to True. |
| DefaultAboveIconHeight | Height for the default icon centered above the items. |
| DefaultBelowIcon | Virtual path for the default icon centered below the items inside the groups. |
| DefaultBelowIconOver | Virtual path for the default icon centered below the items inside the groups when the mouse is over them. |
| DefaultBelowIconSelect | Virtual path for the default icon centered below the items inside the groups when they have the same URL as the current page. Note that this property is valid only if the HighlightPath property of the panel is set to True. |
| DefaultBelowIconHeight | Height for the default icon centered below the items. |
| Item | |
| Item Type Selection | |
| Caption | Caption of the item. If the item is of type "Text" this will be shown as the text for the item in the panel. If the item type is "Image" or "ServerControl" this field will only be displayed in PanelTree in UltimatePanelDesigner, which shows the panel structure in hierarchical form. |
| Type | Type of the item. Possible values are Text, Image and ServerControl. If Text is selected, item is rendered as text. If Image is selected, an image specified by the user will be shown instead of text. If ServerControl is selected, one or more server controls that are located inside the UltimatePanel control on the web form (aspx page) will be rendered inside the panel. |
| AllowedUsers | Current user logged into the system will only see the allowed items specified by the AllowedUsers property of an item. If CurrentUser is not specified it first checks CurrentUserSessionVar and then the current user from HttpContext. Then AllowedUsers property of each item will be checked. If AllowedUsers is not specified for an item it will be displayed. Otherwise it needs to include the CurrentUser in its comma-separated list of users and roles. |
| ServerControlID | If ServerControl is selected as item type, the user should also set the ServerControlID property of the item to the ID of the server control that is inserted as a child into the UltimatePanel control on the web form (aspx page). If there are multiple server controls or a combination of server and HTML controls to be put into UltimatePanel, a panel server control (asp:panel) should be put inside the UltimatePanel control to wrap all those controls under one roof, and the ServerControlID property should be set to the ID of the panel control. |
| OnClick Properties | |
| HotKey | Keyboard shortcut for this item. When the user hits the specified combination of keys it will act as if the item is clicked by mouse. |
| ClientCall | JavaScript function to be called when the item is clicked. Parentheses and the required function variables must be provided. |
| PostBackValue | Post back value to be returned when the item is clicked. |
| URL |
URL to be redirected when the item is clicked.
Note: ClientCall, PostBackValue and URL can be used in combinations. If all of these parameters are provided, first ClientCall function is called, then PostBackValue is sent and then the page is redirected. |
| Target |
String that receives one of the following values for how to navigate to the
specified URL. name The name of the target window or frame. _blank Load the linked document into a new blank window. This window is not named. _media Load the linked document into the HTML content area of the Media Bar. Available in Internet Explorer 6 or later. _parent Load the linked document into the immediate parent of the document the link is in. _search Load the linked document into the browser search pane. Available in Internet Explorer 5 or later. _self Default. Load the linked document into the window in which the link was clicked (the active window). _top Load the linked document into the topmost window. The property has a default value of _self. Expressions can be used in place of the preceding value(s), as of Internet Explorer 5. If there is no existing window or frame with the same name as specified in the target, a new window is opened with a name equal to the value of the target. Note for frames: If this property is left blank UltimatePanel will automatically open the URL in the frame where subpanels open, which is specified by the TargetFrame property of Panel. |
| Item Appearance | |
| SubgroupInitiallyOpen | Boolean to initially open the subgroup of the item. Default is True. |
| SubgroupIndentLeft | Horizontal distance between the item and its child nodes in pixels. |
| SubgroupExpandItemOnClick | Boolean to expand/collapse the subgroup of the item when clicked. Default is True. |
| ItemCssClass | CSS class name for the item that can be either a group header or an item inside a group depending on the type of the selected node. |
| ItemOpenCssClass | CSS class name for the group header items when the group is open. |
| ItemOverCssClass | CSS class name for the items inside groups when the mouse is over the item. |
| ItemSelectCssClass |
CSS class name for the items inside groups when they have the same URL as the
current page.
Note that this property is valid only if the HighlightPath property of the panel is set to True. |
| ItemApplyCaptionOnly | Boolean to apply the style and mouse events to caption only rather the whole item with all icons. |
| ItemNowrap | Boolean to make item wrap or not if the caption is bigger than the item width. Default is True, which means that item is not wrapped. |
| ItemAlign | Align type for the items. Possible values are Left, Center and Right. Default is Left. |
| ItemOver | Mouse over type for the items. Possible values are Item and Row. Item is used to trigger the mouseover event when the mouse is over the item, while Row is used for the whole row. Default is Item. |
| ItemWidth | Width for the item. |
| ItemHeight | Height for the item. |
| ItemToolTip | Text to be shown near the item when the mouse is over the item. |
| ItemStatus | Text to be shown at the status line of the window when the mouse is over the item. |
| Image Appearance | |
| Image | Virtual path for the image that can be either a group header or an item inside a group depending on the type of the selected node. |
| ImageOpen | Virtual path for the image of a group header when the group is open. |
| ImageOver | Virtual path for the image of an item inside a group when the mouse is over the item. |
| ImageSelect |
Virtual path for the image of an item inside a group when it has the same URL
as the current page.
Note that this property is valid only if the HighlightPath property of the panel is set to True. |
| ImageToolTip | Text to be shown when the mouse is over the image item. |
| ImageWidth | Width for the image. Use this property to change the width of the original image. If you want to modify the width of the cell that this image is displayed in you should change ItemWidth. |
| ImageHeight | Height for the image. Use this property to change the height of the original image. If you want to modify the height of the cell that this image is displayed in you should change ItemHeight. |
| Icon Appearance | |
| LeftIcon | Virtual path for the default icon on the left of an item inside the groups when it has no children. |
| LeftIconClosed | Virtual path for the default icon on the left of an item inside the groups when it has children and it is closed. |
| LeftIconOpen | Virtual path for the default icon on the left of an item inside the groups when it has children and it is open. |
| LeftIconOver | Virtual path for the default icon on the left of an item inside the groups when the mouse is over it and it has no children. |
| LeftIconSelect | Virtual path for the default icon on the left of an item inside the groups when it has the same URL as the current page. Note that this property is valid only if the HighlightPath property of the panel is set to True. |
| LeftIconWidth | Width for the default icon on the left of the items. |
| RightIcon | Virtual path for the default icon on the right of an item inside the groups when it has no children. |
| RightIconClosed | Virtual path for the default icon on the right of an item inside the groups when it has children and it is closed. |
| RightIconOpen | Virtual path for the default icon on the right of an item inside the groups when it has children and it is open. |
| RightIconOver | Virtual path for the default icon on the right of an item inside the groups when the mouse is over it and it has no children. |
| RightIconSelect | Virtual path for the default icon on the right of an item inside the groups when it has the same URL as the current page. Note that this property is valid only if the HighlightPath property of the panel is set to True. |
| RightIconWidth | Width for the default icon on the right of the items. |
| AboveIcon | Virtual path for the icon centered above the item inside the group. |
| AboveIconOver | Virtual path for the icon centered above the item inside the group when the mouse is over it. |
| AboveIconSelect | Virtual path for the default icon centered above the item inside the group when it has the same URL as the current page. Note that this property is valid only if the HighlightPath property of the panel is set to True. |
| AboveIconHeight | Height for the icon centered above the item. |
| BelowIcon | Virtual path for the icon centered below the item inside the group. |
| BelowIconOver | Virtual path for the icon centered below the item inside the group when the mouse is over it. |
| BelowIconSelect | Virtual path for the default icon centered below the item inside the group when it has the same URL as the current page. Note that this property is valid only if the HighlightPath property of the panel is set to True. |
| BelowIconHeight | Height for the icon centered below the item. |
| Behavior | |
| Enabled | Boolean for making the item enabled or disabled. Possible values are True and False. When False is selected, item becomes Disabled and DefaultDisabledItemCssClass style applies to the item; ClientCall, PostBackValue or URL will not respond. If the item is also a group, sub panel is not shown when the mouse is over the item. |
| Visible | Boolean for making the item visible or invisible. Possible values are True and False. When False is selected, item is not rendered in the page. |