KB Article K18129
Visible to All Users

Applying an AutoFormat to a DevExpress web control integrated into a SharePoint page

Description:
How can I apply the Aqua AutoFormat to a DevExpress web control contained within a SharePoint page?

Answer:
A specific Aqua AutoFormat has been designed to fit the default style scheme of SharePoint portals. Applying the Aqua AutoFormat facilitates appearance customization of DevExpress web controls integrated into SharePoint pages.
This article demonstrates how the Aqua AutoFormat can be applied to a ASPxNavBar control, which is integrated into a page as the following article recommends:
Replacing a SharePoint master page's default Quick Launch menu with the ASPxNavBar

Commonly, to simplify the process, the AutoFormat can be initially applied to a ASPxNavBar control within a Visual Studio sample project, and then, the modified aspx code of the control and the required image and CSS files can be copied to the SharePoint application.
Perform the following detailed steps to accomplish the task.

  1. Using the Microsoft Office SharePoint Designer 2007, open the SharePoint page that contains the ASPxNavBar and copy the ASPxNavBar's markup.
  2. Create a sample Visual Studio project, drop an ASPxNavBar control onto the form, and replace the dropped control's markup with the markup copied from the SharePoint page.
  3. Within the Visual Studio project, open the ASPxNavBar's "Auto Format" dialog window (using the control smart tag's "Auto Format…" item, for instance) and apply the Aqua AutoFormat to the control.
    As a result, the Aqua folder containing specific image and CSS files is created within the web project's App_Themes folder, and the ASPxNavBar's markup is modified so that particular properties are defined.
  4. Copy the Aqua folder with its content from the Visual Studio web project's App_Theme folder and paste it to the SharePoint site's _themes service folder using the Microsoft Office SharePoint Designer 2007. You can find the _themes folder within the SharePoint site's root folder (create the _themes folder, if it doesn't yet exist).
  5. Copy the modified markup of the ASPxNavBar control from the Visual Studio web page and paste it back into the SharePoint page, replacing the previous markup of the ASPxNavBar.
  6. Within the inserted ASPxNavBar markup, find the occurrences of the "App_Themes" folder name and change them to "_themes" value. Below is the resulting markup of the ASPxNavBar control within the SharePoint page:
ASPx
<dxnb:ASPxNavBar id="QuickLaunchNavBar" runat="server" DataSourceID="QuickLaunchSiteMap" CssFilePath="~/_themes/Aqua/{0}/styles.css" CssPostfix="Aqua" GroupSpacing="1px" ImageFolder="~/_themes/Aqua/{0}/" Width="100%" > <LoadingPanelImage Url="~/_themes/Aqua/Web/nbLoading.gif" /> <ItemStyle ImageSpacing="10px" /> <GroupContentStyle ItemSpacing="1px"></GroupContentStyle> <CollapseImage Height="17px" Url="~/_themes/Aqua/Web/nbCollapse.png" Width="17px" /> <ExpandImage Height="17px" Url="~/_themes/Aqua/Web/nbExpand.png" Width="17px" /> </dxnb:ASPxNavBar>
  1. Save the page and view the SharePoint portal in browser, to see the results.

    See Also:
    Replacing a SharePoint master page's default Quick Launch menu with the ASPxNavBar
    How to integrate a DevExpress web control into a SharePoint page

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.