This is a migrated thread and some comments may be shown as answers.

Mega Drop Down menu issue

1 Answer 121 Views

This is a migrated thread and some comments may be shown as answers.

Rodolfo Chacon Vazquez asked on 29 Mar 2012, 07:06 PM

Hi,

I'm trying to implement the Mega Drop Down menu and in the same page display a RadGrid allowing filtering in the columns. It appears there is a bug in the Mega Drop Down, since filtering stop working in the RadGrid as soon I add the Mega Drop Down control. If I comment the Mega Drop Down code the RadGrid control works perfectly.

I use Q1 2012 version

Any clue??

Mega Drop Down code

<div id="MegaDropDown">

<script type="text/javascript">

function itemOpened(s, e) {

if ($telerik.isIE8) {

// Fix an IE 8 bug that causes the list bullets to disappear (standards mode only)

$telerik.$("li", e.get_item().get_element()).each(function () {

this.style.cssText = this.style.cssText;

});

}

</script>

<telerik:RadMenu runat="server" ID="RadMenu1" Skin="Sitefinity" OnClientItemOpened="itemOpened"

Width="590px" Height="50px" EnableShadows="true">

<Items>

<telerik:RadMenuItem Text="Products" PostBack="false">

<Items>

<telerik:RadMenuItem CssClass="Products" Width="640px">

<ItemTemplate>

<div id="CatWrapper" class="Wrapper" style="width: 435px;">

<h3>

Categories</h3>

<telerik:RadSiteMap ID="RadSiteMap1" runat="server" Skin="Hay" EnableTextHTMLEncoding="true">

<LevelSettings>

<telerik:SiteMapLevelSetting Level="0">

<ListLayout RepeatColumns="3" RepeatDirection="Vertical" />

</telerik:SiteMapLevelSetting>

</LevelSettings>

<Nodes>

<telerik:RadSiteMapNode NavigateUrl="#" Text="Furniture">

<Nodes>

<telerik:RadSiteMapNode NavigateUrl="#" Text="Tables & Chairs" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Sofas" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Occasional Furniture" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Childerns Furniture" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Beds" />

</Nodes>

</telerik:RadSiteMapNode>

<telerik:RadSiteMapNode NavigateUrl="#" Text="Decor">

<Nodes>

<telerik:RadSiteMapNode NavigateUrl="#" Text="Bed Linen" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Throws" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Curtains & Blinds" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Rugs" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Carpets" />

</Nodes>

</telerik:RadSiteMapNode>

<telerik:RadSiteMapNode NavigateUrl="#" Text="Storage">

<Nodes>

<telerik:RadSiteMapNode NavigateUrl="#" Text="Wall Shelving" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Kids Storage" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Baskets" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Multimedia Storage" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Floor Shelving" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Toilet Roll Holders" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Storage Jars" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Drawers" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Boxes" />

</Nodes>

</telerik:RadSiteMapNode>

<telerik:RadSiteMapNode NavigateUrl="#" Text="Lights">

<Nodes>

<telerik:RadSiteMapNode NavigateUrl="#" Text="Ceiling" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Table" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Floor" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Shades" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Wall Lights" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Spotlights" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Push Light" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="String Lights" />

</Nodes>

</telerik:RadSiteMapNode>

</Nodes>

</telerik:RadSiteMap>

</div>

<div id="FeatProduct">

<h3>

Featured</h3>

<img src="Img/lamp.jpg" alt="Deco Mirror Table Lamp - $ 24.99" width="128px" height="150px" />

<p>

Deco Mirror Table Lamp

<br />

<span class="price">$ 24.99</span></p>

</div>

</ItemTemplate>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Stores" PostBack="false">

<Items>

<telerik:RadMenuItem CssClass="Stores" Width="640px">

<ItemTemplate>

<div id="StoreWrapper" class="Wrapper">

<h3>

Around the Globe</h3>

<img id="world" src="Img/world.gif" width="355" height="210" usemap="#m_world" alt="world" />

<map name="m_world" id="m_world">

<area shape="circle" coords="309,171, 5" href="#" alt="New Zealand" />

<area shape="circle" coords="278,153, 5" href="#" alt="Australia" />

<area shape="circle" coords="272,116, 5" href="#" alt="Philippines" />

<area shape="circle" coords="255,128, 5" href="#" alt="Malaysia" />

<area shape="circle" coords="234,105, 5" href="#" alt="India" />

<area shape="circle" coords="200,98, 5" href="#" alt="Middle East" />

<area shape="circle" coords="173,80, 5" href="#" alt="Europe" />

<area shape="circle" coords="161,73, 5" href="#" alt="United Kingdom" />

<area shape="circle" coords="85,91, 5" href="#" alt="United States" />

<area shape="circle" coords="80,73, 5" href="#" alt="Canada" />

</map>

<telerik:RadSiteMap ID="RadSiteMap2" runat="server" Skin="Hay" Width="250px" Style="padding-top: 30px;"

EnableTextHTMLEncoding="true">

<LevelSettings>

<telerik:SiteMapLevelSetting Level="0">

<ListLayout RepeatColumns="2" RepeatDirection="Vertical" />

</telerik:SiteMapLevelSetting>

</LevelSettings>

<Nodes>

<telerik:RadSiteMapNode>

<Nodes>

<telerik:RadSiteMapNode NavigateUrl="#" Text="Australia" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Canada" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Europe" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="India" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Malaysia" />

</Nodes>

</telerik:RadSiteMapNode>

<telerik:RadSiteMapNode>

<Nodes>

<telerik:RadSiteMapNode NavigateUrl="#" Text="Middle East" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="New Zealand" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Philippines" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="United Kingdom" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="United States" />

</Nodes>

</telerik:RadSiteMapNode>

</Nodes>

</telerik:RadSiteMap>

<a class="moreLink" href="#">See full list »</a>

</div>

</ItemTemplate>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="News" PostBack="false">

<Items>

<telerik:RadMenuItem CssClass="News" Width="640px">

<ItemTemplate>

<div id="NewsWrapper" class="Wrapper">

<h3>

Latest News</h3>

<div class="newsLeft">

<img src="Img/interior.png" alt="news" />

<h2>

<a href="#">Kelly Hoppen to speak at interiors 2010</a></h2>

<span>01/02/2010</span>

<p>

Internationally acclaimed British interior designer, Kelly Hoppen, will present

a seminar at interiors 2010 on Wednesday 27th January. Kelly’s reputation for simple

but opulent styling has ...</p>

</div>

<table cellspacing="0" cellpadding="0" width="290px">

<tr>

<td>

<span>02/02/2010</span>

</td>

<td>

<a href="#" class="newsLink">PANTONE Color Report Fall 2010</a><br />

In conjunction with New York Fashion Week, Pantone today released the PANTONE Fashion

Color Report Fall 2010 ...

</td>

</tr>

<tr>

<td>

<span>03/02/2010</span>

</td>

<td>

<a href="#" class="newsLink">Interiors 2010 reports great business</a><br />

Interiors 2010, the first and largest dedicated UK ...

</td>

</tr>

<tr>

<td>

<span>04/02/2010</span>

</td>

<td>

<a href="#" class="newsLink">San Francisco Design Week 2010</a><br />

The mission of Design Week raise public awareness of Design ...

</td>

</tr>

<tr>

<td>

<span>05/02/2010</span>

</td>

<td>

<a href="#" class="newsLink">Travel + Leisure 2010 Design Award Winners</a><br />

The most outstanding new examples of design and architecture ...

</td>

</tr>

</table>

<a class="moreLink" href="#">View all »</a>

</div>

</ItemTemplate>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Events" PostBack="false">

<Items>

<telerik:RadMenuItem CssClass="Events" Width="640px">

<ItemTemplate>

<div id="EventWrapper" class="Wrapper">

<h3>

Industry Events</h3>

<div class="newsLeft">

<img src="Img/events.jpg" alt="events" />

<h2>

<a href="#">International Furniture Fair Tokyo (IFFT)</a></h2>

<span>10/02/2010</span>

<p>

Furniture design event inaugurated in 1979 featuring furniture and interior design

exhibitors from all over the world.</p>

</div>

<table cellspacing="0" cellpadding="0" width="290px">

<tr>

<td>

<span>01/02/2010</span>

</td>

<td>

<a href="#" class="eventLink">International Interior & Furniture Exhibition (IFEX)</a>

</td>

</tr>

<tr>

<td>

<span>02/02/2010</span>

</td>

<td>

<a href="#" class="eventLink">Australian International Furniture Fair </a>

</td>

</tr>

<tr>

<td>

<span>03/02/2010</span>

</td>

<td>

<a href="#" class="eventLink">Las Vegas Furniture Show </a>

</td>

</tr>

<tr>

<td>

<span>04/02/2010</span>

</td>

<td>

<a href="#" class="eventLink">Home Fashion & Design Shanghai</a>

</td>

</tr>

<tr>

<td>

<span>05/02/2010</span>

</td>

<td>

<a href="#" class="eventLink">imm cologne </a>

</td>

</tr>

<tr>

<td>

<span>06/02/2010</span>

</td>

<td>

<a href="#" class="eventLink">Malaysian International Furniture Fair </a>

</td>

</tr>

<tr>

<td>

<span>07/02/2010</span>

</td>

<td>

<a href="#" class="eventLink">Salon du Meuble de Paris </a>

</td>

</tr>

<tr>

<td>

<span>08/02/2010</span>

</td>

<td>

<a href="#" class="eventLink">ICFF: International Contemporary Furniture Fair</a>

</td>

</tr>

</table>

<a class="moreLink" href="#">View all »</a>

</div>

</ItemTemplate>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Catálogos" PostBack="false">

<Items>

<telerik:RadMenuItem CssClass="Producst">

<ItemTemplate>

<div id="CatWrapper" class="Wrapper">

<h3>

Catálogos</h3>

<telerik:RadSiteMap ID="RadSiteMapCatalogos" runat="server" Skin="Hay" DataSourceID="ObjectDataSource1"

DataFieldID="ID" DataFieldParentID="ParentID" DataTextField="Text" DataNavigateUrlField="URL"

EnableTextHTMLEncoding="true">

<LevelSettings>

<telerik:SiteMapLevelSetting Level="0">

<ListLayout RepeatColumns="2" RepeatDirection="Vertical" />

</telerik:SiteMapLevelSetting>

</LevelSettings>

</telerik:RadSiteMap>

</div>

</ItemTemplate>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenu>

</div>

RadGrid code:

<telerik:RadGrid ID="RadGrid1" runat="server"

GridLines="None" AllowFilteringByColumn="True" AllowPaging="True" AllowSorting="True"

DataSourceID="ObjectDataSource1" ShowGroupPanel="True" Width="600px">

<ExportSettings OpenInNewWindow="True" ExportOnlyData="true" IgnorePaging="true">

<Excel Format="ExcelML" />

</ExportSettings>

<ClientSettings AllowDragToGroup="True">

</ClientSettings>

<MasterTableView DataSourceID="ObjectDataSource1" CommandItemDisplay="Top">

<CommandItemSettings ShowExportToExcelButton="true" ShowAddNewRecordButton="False" />

<RowIndicatorColumn>

<HeaderStyle Width="20px"></HeaderStyle>

</RowIndicatorColumn>

<ExpandCollapseColumn>

<HeaderStyle Width="20px"></HeaderStyle>

</ExpandCollapseColumn>

<EditFormSettings>

<EditColumn CancelImageUrl="Cancel.gif" EditImageUrl="Edit.gif" InsertImageUrl="Update.gif"

UpdateImageUrl="Update.gif">

</EditColumn>

</EditFormSettings>

</MasterTableView>

<FilterMenu EnableEmbeddedSkins="False">

</FilterMenu>

<HeaderContextMenu EnableEmbeddedSkins="False">

</HeaderContextMenu>

</telerik:RadGrid>

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="getCampus"

TypeName="WebApplication_Test.Test"></asp:ObjectDataSource>

1 Answer, 1 is accepted

answered on 30 Mar 2012, 05:49 AM

Hi!

After a couple of hours I found the problem/bug and the solution is very very simple but I think Telerik should fix it or warn about it!!

The Mega Drop Down menu use an external css file

<link rel="stylesheet" type="text/css" href="Style.css" />

and the style of the div that contain the Menu has a height property, well, if in your page you have, as me, a RadGrid below the Mega Drop Down menu, the height property (of the div of the Menu) will cover the RadGrid and will cause that you can't interact with the RadGrid and as in my case that the filters "stop" working.

div#MegaDropDown

{

margin: 0;

padding: 20px 0 0 0;

width: 880px;

height: 352px; /*the BUG!! */

background-image: url('Img/main_back.jpg');

background-repeat: no-repeat;

}

So, the solution is simple, delete the height property and all will work smoothly again!

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Mega Drop Down menu issue

1 Answer, 1 is accepted