SharePoint Experts, Information Architects, Expert Witness

We provide consulting in a broad array of business and technology from architecture to design to deployment of global systems with a focus on surfacing data in the enterprise. Specialists in Microsoft, we are a premier provider of SharePoint Expertise (including 2016 and Office 365). We also provide Expert Witness/Legal Expert in eDiscovery, source discovery, patent infringement, piracy and more! We also have established SICG DLDS s.a. - our counterpart in Costa Rica that specializes in water systems (http://www.crwatersolutions.com) - Contact me direct: david_sterling@sterling-consulting.com or call 704-873-8846 x704.

Search This Blog

Saturday, March 5, 2011

Using DevExpress ASPxMenu control in SharePoint 2010

I am sure some of you have used this control either in ASP.NET or using SharePoint 2007. I recently implemented this in SharePoint 2010 to create a custom navigation bar for my client. In general, the control works as designed except for the 'boundaries' of the page in 2010. This apparently is due to the base 503 compliance for the v4.master.

When I implemented at first, I found the navigation would drop just below the browser - this means that the scroll itself would drop below view causing the page to veritically scroll. I fixed this by adding:

Menu.SubMenuStyle.Paddings.PaddingBottom = System.Web.UI.WebControls.Unit.Pixel(10);

MenuItem.SubMenuStyle.Paddings.PaddingBottom = System.Web.UI.WebControls.Unit.Pixel(10);

to every menu item created. This corrected the primary navigation items and the scroll appears as normal.

Alas, that was not the only problem - the flyout submenus have the same settings - adding the padding 'almost' fixed the bottom of the menu, but the top of the menu is hidden behind the "Site Actions" Div in the master page. After much scratching and searching, I was able to get just what I wanted by simply adding a Span of my own around the control in the master page as follows:

<span style="z-index:1;"><control here ></span>

The key fix is the Z-Index setting - this causes the control to be rendered last, therefore on top of the page! Works perfectly now and the menu goes 7 levels deep! Note that embedding the span in the control will not work; it must be on the page.

UPDATE FROM DEVEXPRESS:

The SharePoint Master page for SP2010 is the v4.master which has a DOCTYPE of "Strict"; this is on their 'to do' list to enable - at present, they recommend using "Transitional". I have not completely tested this in SharePoint yet but unless I see something, follow their recommendation.

No comments: