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

menu like telerik

24 Answers 328 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Tom
Top achievements
Rank 1
Tom asked on 21 Jun 2010, 04:43 PM
I just downloaded the trial version and I am trying to config the menu to make it look like the menu on telerik homepage.  Look like it using tabstrip and menu with template?  Can you give me the hints and is there an example? Thanks.

24 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 22 Jun 2010, 10:16 AM
Hello,


You can achieve this by using ItemTemplate for RadMenuItem. A similar scenario is demonstrated here. Check out this demo.
Mega Drop-Down


-Shinu.
0
Tom
Top achievements
Rank 1
answered on 24 Jun 2010, 12:57 AM
Thanks.
0
Nitish
Top achievements
Rank 1
answered on 30 Mar 2011, 07:42 AM
I am using mega dropdown menu.
Will anybody tell me how can I use multi theme mega dropdown menu.
I mean to say whenever i change the theme, mega menu dropdown converts into that theme.
0
Kate
Telerik team
answered on 30 Mar 2011, 02:16 PM
Hello Nitish,

We currently do not support different skins of the MegaDrop-Down menu. If you need to customize the look of the menu you can change it by using the current Style.css file that is applied in the demo here.

Best wishes,
Kate
the Telerik team
0
Nitish
Top achievements
Rank 1
answered on 30 May 2011, 11:52 AM
I am using mega drop down menu.In that drop down menu i have used radcombo box to fill the items.But when i going to select the options, the menu section slided and closed.Menu should be stay at the time of selection. Textbox is working fine but Radcombox is not working.
Please give me urgent solution if it is possible.
0
Princy
Top achievements
Rank 2
answered on 30 May 2011, 01:20 PM
Hello Gray,

 In order to keep the dropdown open while changing the selection of the list box, a better approach is to try from the client side. Attach the OnClientDropDownClosing event to the RadComboBox and use the following code in the handler.

Javascript:
function OnClientDropDownClosing(sender, args)
   {
       if (args.get_domEvent().target == sender.get_imageDomElement())
       {
           args.set_cancel(false);
       }
       else
       {
           args.set_cancel(true);
       }
 }

Thanks,
Princy.
0
Nitish
Top achievements
Rank 1
answered on 30 May 2011, 02:22 PM
<telerik:RadComboBox ID="Cmbname" runat="server"  Width="140px" EmptyMessage="Select Views">
           <Items>
            <telerik:RadComboBoxItem Value="0" Text="Select Views" />
             <telerik:RadComboBoxItem Value="1" Text="My Views" />
             <telerik:RadComboBoxItem Value="2" Text="Groups View" />
             <telerik:RadComboBoxItem Value="3" Text="Global Views" />
             </Items>
</telerik:RadComboBox>
Princy,
I am talking about mega menu behind the radcombo box is closed instantly.The above code i am using in Radmenu item(Mega menu).When i select any radcombobox item, radcombobox item list remains there and radmenu behind it closed instantly. But mega radmenu should also be there at the time of selected radcombobox item.
Please reply asap
                                                                                          </telerik:RadComboBox>
0
Kate
Telerik team
answered on 02 Jun 2011, 11:17 AM
Hello Nitish,

Please take a look at the following help article that explains how you can control when the menu should expand and collapse.

Greetings,
Kate
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
Nitish
Top achievements
Rank 1
answered on 05 Jun 2011, 01:10 PM
Thanks. But this is not helpful for me.
you guys can not able to help me. :)

Actually my problem is not to click the menu.
I am using telerik mega menu and in that i am showing one dropdown list. when i select any option from dropdown list, the mega menu collapse and only list is left there.this is the issue. I want when i select option from dropdown list then
<telerik:RadMenu runat="server" ID="RadMenu1" Skin="Sitefinity"  
                                   Width="700px" Height="60px" EnableShadows="true" CollapseAnimation-Type="OutSine" >
                                   <Items>
                                       <telerik:RadMenuItem Text="Home" PostBack="false" ImageUrl="~/Content/images/megamenu/Home_new1.png"
                                           NavigateUrl="Default.aspx">
                                           <Items>
                                           </Items>
                                       </telerik:RadMenuItem>
                                       <telerik:RadMenuItem Text="Ticket" PostBack="false" NavigateUrl="Ticket/Ticket.aspx"
                                           ImageUrl="Content/images/megamenu/ticket.png" GroupSettings-OffsetX="118">
                                           <Items>
                                               <telerik:RadMenuItem CssClass="Events" Width="640px">
                                                   <ItemTemplate>
                                                       <div id="CatWrapper" class="Wrapper">
                                                           <h3 style="font-family: Arial;">
                                                               Tickets</h3>
                                                           <table width="100%" cellspacing="0" cellpadding="0" border="0" >
                                                               <tr>
                                                                   <td style="width: 20%; vertical-align: top;">
                                                                       <asp:Image name="world" ImageUrl="~/Content/images/megamenu/My-Tickets1.png" runat="server"
                                                                           ID="world" />
                                                                                                                                          </td>
                                                                   <td style="width: 80%; vertical-align: top; padding: 5px 2px 5px 5px; text-align: left;">
                                                                       <table width="100%">
                                                                           <tr>
                                                                               <td valign="top">
                                                                                   <table style="float: right; padding-right: 10px;">
                                                                                       <tr>
                                                                                           <td style="color: #5A7994">
                                                                                               <asp:Label ID="lblSearch" runat="server" Text="Open :"></asp:Label>
                                                                                           </td>
                                                                                           <td>
                                                                                               <asp:TextBox ID="txtSearch" runat="server" Width="200px" BorderStyle="None" Height="22px" BorderWidth="0"
                                                                                                   Style="background-image: url(../Content/images/megamenu/RootItemBg3.png); background-position: 100px -10px;
                                                                                                   color: #fff; font-family:Arial"></asp:TextBox>
                                                                                               <asp:CompareValidator ID="cmpSearch" runat="server" ControlToValidate="txtSearch" 
                                                                                               Type="Integer" Display="Dynamic"   Operator="DataTypeCheck" ErrorMessage="Value must be integer!" />
                                                                                           </td>
                                                                                           <td>
                                                                                               <asp:ImageButton ID="ImgGo" OnClick="ImgGo_OnClick" AlternateText="For Search" ImageUrl="~/Content/images/megamenu/go.png"
                                                                                                   runat="server" style="cursor:pointer" />
                                                                                           </td>
                                                                                       </tr>
                                                                                   </table>
                                                                               </td>
                                                                           </tr>
                                                                           <tr>
                                                                               <td style="padding: 10px 0px 10px 0px;">
                                                                               </td>
                                                                           </tr>
                                                                           <tr>
                                                                               <td>
                                                                                   <table>
                                                                                       <tr>
                                                                                           <td style="vertical-align:top;">
                                                                                               <telerik:RadSiteMap runat="server" ID="RadSiteMap2" Width="180px" Skin="Hay">
                                                                                               <LevelSettings>
                                                                                                   <telerik:SiteMapLevelSetting Level="0" Width="180px">
                                                                                                       <ListLayout RepeatColumns="1" RepeatDirection="Vertical" AlignRows="true"/>
                                                                                                   </telerik:SiteMapLevelSetting>
                                                                                               </LevelSettings>
                                                                                               <Nodes>
                                                                                                   <telerik:RadSiteMapNode Value="Recent Tickets" Text="Recent Tickets" Font-Bold="true" runat="server" 
                                                                                                       <Nodes >
                                                                                                        
                                                                                                       </Nodes>
                                                                                                   </telerik:RadSiteMapNode>
                                                                                               </Nodes>
                                                                                               </telerik:RadSiteMap>
                                                                                                 
                                                                                           </td>
                                                                                           <td style="vertical-align:top;">
                                                                                           <telerik:RadComboBox ID="Cmbvalue" runat="server" Width="140px"  EmptyMessage="Select Template" OnClientSelectedIndexChanging="Cmbvalue_OnClientSelectedIndexChanging"></telerik:RadComboBox>
                                                                                            
                                                                                             <telerik:RadButton ID="btnfind" OnClick="btnfind_OnClick" Text="<%$ Resources:Ticket, New_Ticket%>"  runat="server" Visible="true" ></telerik:RadButton>
                                                                                           <br /><br />
                                                                                           <a class="moreLink" href="Ticket/Ticket.aspx">« Views »</a>
                                                                                           <br /><br />
                                                                                           <a class="moreLink" href="Ticket/Ticket.aspx">« My Folder »</a>
                                                                                           </td>
                                                                                       </tr>
                                                                                   </table>
                                                                                     
                                                                               </td>
                                                                           </tr>
                                                                       </table>
                                                                   </td>
                                                               </tr>
                                                           </table>
                                                             
                                                       </div>
                                                   </ItemTemplate>
                                               </telerik:RadMenuItem>
                                           </Items>
                                       </telerik:RadMenuItem>
                                       <telerik:RadMenuItem Text="Assets" Enabled="true" ImageUrl="Content/images/megamenu/assets.png"
                                           PostBack="false" >
                                       </telerik:RadMenuItem>
                                       <telerik:RadMenuItem Text="People" PostBack="false" NavigateUrl="People/PeopleList.aspx"
                                           ImageUrl="Content/images/megamenu/clients.png">
                                           <Items>
                                           </Items>
                                       </telerik:RadMenuItem>
                                       <telerik:RadMenuItem Text="Admin" PostBack="false" NavigateUrl="Configure/ImpactList.aspx"
                                           ImageUrl="Content/images/megamenu/configure_new.png" GroupSettings-OffsetX="200">
                                           <Items>
                                               <telerik:RadMenuItem CssClass="Events" Width="640px">
                                                   <ItemTemplate>
                                                       <div id="CatWrapper" class="Wrapper" style="width: 435px;">
                                                           <h3 style="font-family: Arial;">
                                                               Admin</h3>
                                                           <telerik:RadSiteMap ID="RadSiteMap1" runat="server" Skin="Hay">
                                                               <LevelSettings>
                                                                   <telerik:SiteMapLevelSetting Level="1">
                                                                       <ListLayout RepeatColumns="3" RepeatDirection="Vertical" />
                                                                   </telerik:SiteMapLevelSetting>
                                                               </LevelSettings>
                                                               <Nodes>
                                                                   <telerik:RadSiteMapNode NavigateUrl="#" Text="Configure">
                                                                       <Nodes>
                                                                           <telerik:RadSiteMapNode NavigateUrl="Configure/ImpactList.aspx" Text="Impact" />
                                                                           <telerik:RadSiteMapNode NavigateUrl="Configure/UrgencyList.aspx" Text="Urgency" />
                                                                           <telerik:RadSiteMapNode NavigateUrl="Configure/PriorityList.aspx" Text="Priorities" />
                                                                           <telerik:RadSiteMapNode NavigateUrl="~/PriorityMatrix/Index" Text="Priority Matrix" />
                                                                           <telerik:RadSiteMapNode NavigateUrl="Configure/Categories.aspx" Text="Categories" />
                                                                           <telerik:RadSiteMapNode NavigateUrl="Configure/TypeList.aspx" Text="Ticket Types" />
                                                                           <telerik:RadSiteMapNode NavigateUrl="Configure/ItemList.aspx" Text="Ticket Items" />
                                                                           <telerik:RadSiteMapNode NavigateUrl="Configure/StatusList.aspx" Text="Ticket Status" />
                                                                           <telerik:RadSiteMapNode NavigateUrl="Configure/TypeList.aspx" Text="Ticket Types" />                                                                             
                                                                           <telerik:RadSiteMapNode NavigateUrl="Configure/ChangeTypes.aspx" Text="Change Types" />
                                                                           <telerik:RadSiteMapNode NavigateUrl="Configure/ChangeStatus.aspx" Text="Change Status" />
                                                                           <telerik:RadSiteMapNode NavigateUrl="Configure/ChangeReasons.aspx" Text="Change Reasons" />
                                                                           <telerik:RadSiteMapNode NavigateUrl="Configure/ViewsList.aspx" Text="Manage Views" />
                                                                           <telerik:RadSiteMapNode NavigateUrl="Configure/HolidayList.aspx" Text="Holiday" />
                                                                           <telerik:RadSiteMapNode NavigateUrl="Configure/OperatingHoursList.aspx" Text="Operating Hours" />
                                                                           <telerik:RadSiteMapNode NavigateUrl="Configure/DepartmentList.aspx" Text="Departments" />
                                                                           <telerik:RadSiteMapNode NavigateUrl="Configure/SystemSettings.aspx" Text="System Settings" />                                                                           
                                                                           <telerik:RadSiteMapNode NavigateUrl="#" Text="User Settings" />                                                                            
                                                                           <telerik:RadSiteMapNode NavigateUrl="#" Text="ToolBar Configuration" />
                                                                       </Nodes>
                                                                   </telerik:RadSiteMapNode>
                                                                   <telerik:RadSiteMapNode NavigateUrl="Ticket/Ticket.aspx" Text="Users">
                                                                       <Nodes>
                                                                           <telerik:RadSiteMapNode NavigateUrl="Organization/OrganizationList.aspx" Text="Organizations" />
                                                                           <telerik:RadSiteMapNode NavigateUrl="~/People/PeopleList.aspx" Text="People" />
                                                                           <telerik:RadSiteMapNode NavigateUrl="ActiveDirectory/ADIndex.aspx" Text="Active Directory" />
                                                                       </Nodes>
                                                                   </telerik:RadSiteMapNode>
                                                                   <telerik:RadSiteMapNode NavigateUrl="#" Text="Security">
                                                                       <Nodes>
                                                                           <telerik:RadSiteMapNode NavigateUrl="~/Security/RolesList.aspx" Text="Roles" />
                                                                           <telerik:RadSiteMapNode NavigateUrl="~/Security/GroupsList.aspx" Text="Groups" />
                                                                           <telerik:RadSiteMapNode NavigateUrl="#" Text="Application Permission" />
                                                                       </Nodes>
                                                                   </telerik:RadSiteMapNode>
                                                                   <telerik:RadSiteMapNode NavigateUrl="#" Text="Customization">
                                                                       <Nodes>
                                                                           <telerik:RadSiteMapNode NavigateUrl="~/CustomField/Index" Text="Custom Fields" />
                                                                           <telerik:RadSiteMapNode NavigateUrl="#" Text="Ticket Templates" />
                                                                           <telerik:RadSiteMapNode NavigateUrl="#" Text="Ticket Templates" />
                                                                           <telerik:RadSiteMapNode NavigateUrl="#" Text="Change Request Templates" />
                                                                           <telerik:RadSiteMapNode NavigateUrl="#" Text="Asset Templates" />
                                                                           <telerik:RadSiteMapNode NavigateUrl="#" Text="People Templates" />
                                                                           <telerik:RadSiteMapNode NavigateUrl="#" Text="Organization Templates" />
                                                                           <telerik:RadSiteMapNode NavigateUrl="EmailTemplate/EmailTemplateList.aspx" Text="Email Templates" />
                                                                           <telerik:RadSiteMapNode NavigateUrl="#" Text="Task Templates" />
                                                                       </Nodes>
                                                                   </telerik:RadSiteMapNode>
                                                                     
                                                               </Nodes>
                                                           </telerik:RadSiteMap>
                                                       </div>
                                                                                                                                                                                                                                     </div>
                                                   </ItemTemplate>
                                               </telerik:RadMenuItem>
                                           </Items>
                                       </telerik:RadMenuItem>
                                       
                                   </Items>
                               </telerik:RadMenu>
megamenu should not be collapsed
0
Kate
Telerik team
answered on 06 Jun 2011, 04:09 PM
Hello Nitish,

Thanks for clarifying.
I have attached a sample project where I first use z-index to bring the RadComboBox and the RadComboBox  dropdown list on top of the menu and the I apply javascript, so that the menu stays open after the section of an item from the RadComboBox. Let me know if this is what you need.

All the best,
Kate
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
Nitish
Top achievements
Rank 1
answered on 07 Jun 2011, 06:00 AM
Thanks a lot Kate. Awesome work dear.
0
kianno
Top achievements
Rank 1
answered on 29 Jul 2011, 10:24 AM
Hi,

I would like to know is it possible to have submenu within a megamenu ? (refer to attach file image )

0
Kate
Telerik team
answered on 29 Jul 2011, 01:06 PM
Hi Kianno,

In order to put a RadMenu inside the MegaDropDownMenu you need to put the new RadMenu control in an ItemTemplate of its RadMenuItem.

Best wishes,
Kate
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
Nitish
Top achievements
Rank 1
answered on 07 Sep 2011, 01:32 PM
I am using Radgrid in many pages. I want to change the font-size of text that we used in rad grid.
.RadGrid, .RadGrid .rgMasterTable, .RadGrid .rgDetailTable, .RadGrid .rgGroupPanel table, .RadGrid .rgCommandRow table, .RadGrid .rgEditForm table, .RadGrid .rgPager table, .GridToolTip
{
    font-family: Segoe UI !important; 
    font-size : 25px;  
}
But by using this code,i can only change my font-family not the font-size. Please help me. how can i do this.
0
Princy
Top achievements
Rank 2
answered on 07 Sep 2011, 01:52 PM
Hello Nitish,

in order to override the default CSS style use the !important modifier.
CSS:
.RadGrid, .RadGrid .rgMasterTable, .RadGrid .rgDetailTable, .RadGrid .rgGroupPanel table, .RadGrid .rgCommandRow table, .RadGrid .rgEditForm table, .RadGrid .rgPager table, .GridToolTip
{
    font-family: Segoe UI !important;
    font-size : 25px !important;; 
}

Thanks,
Princy.
0
Kate
Telerik team
answered on 07 Sep 2011, 01:58 PM
Hello Nitish,

In order for the changes to take effect you will need to increase the specificity of the css class selectors. For example using the Default skin of the RadGrid you can add a div and thus increase the weight of the selectors so that they could be applied instead of the default ones. Here is an example:
div.RadGrid_Default,
div.RadGrid_Default .rgMasterTable,
div.RadGrid_Default .rgDetailTable,
div.RadGrid_Default .rgGroupPanel table,
div.RadGrid_Default .rgCommandRow table,
div.RadGrid_Default .rgEditForm table,
div.RadGrid_Default .rgPager table,
.GridToolTip_Default {
/*here you can specify the font, its size etc */
    font: 17px/16px "segoe ui",arial,sans-serif;
}

Regards,
Kate
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

0
Nitish
Top achievements
Rank 1
answered on 12 Sep 2011, 09:31 AM
I need the help to manage the time delay in radmenu toolbar. when i mouseover on menu tab, submenu <div> opens.
I want when i mouseover on menu tab, after a pause of second, submenu<div> should be open.
Please i need this very urgent.
0
Shinu
Top achievements
Rank 2
answered on 12 Sep 2011, 10:08 AM
Hello Nitish,

Try setting the ExpandDelay property to manage a time delay.
aspx:
<telerik:RadMenu ID="RadMenu1" runat="server" ExpandDelay="1000">
</telerik:RadMenu>

Thanks,
Shinu.
0
Nitish
Top achievements
Rank 1
answered on 13 Oct 2011, 01:44 PM
I am using <telerik:RadFormDecorator> control to decorate the scrollbars. It is working fine in IE8 but it is not working in firefox.
Actually i am desingning my web application based on multi theme. when i test my design on firefox scrollbar is in default mode. there is no theme concept with scrollbars.
Please help me.
<telerik:RadFormDecorator ID="FormDecorator1" runat="server" DecoratedControls="Scrollbars"></telerik:RadFormDecorator
0
Rumen
Telerik team
answered on 18 Oct 2011, 08:25 AM
Hi Nitish,

Firefox does not support scrollbar decoration. Currently scroll decoration is allowed in IE and WebKit only.

One important thing you must know about a colored scrollbar is that it does not do not work in Gecko-based browsers (Firefox, Netscape Navigator, Mozilla): It is not a standard property or a proprietary property. According to W3C, these properties are illegal: they are neither defined in any CSS specification nor are they marked as proprietary (by prefixing them with "-vendor-"). 

Greetings,
Rumen
the Telerik team
Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
0
Nitish
Top achievements
Rank 1
answered on 19 Nov 2011, 11:44 AM
Hello Telerik Team,
I need your urgent help.
Actually i am using radtoolbar in Radpageview.
It works fine in chrome browser and firefox but it doesnt work in IE8.0 browser.Style of radtoolbar is also not working in IE8.0.
I want to show the radtoolbar fine in any browser. specially in IE8.0.
I'm displaying ADD,edit,delete icon in radtolbar. But in IE8, it shows vertically with no style there. Please help as soon as possible

Thanks
Nitish saraswat
0
Kate
Telerik team
answered on 22 Nov 2011, 04:45 PM
Hello Nitish,

Can you please provide either a live url or a simplified runnable page where we can observe the issue and see the appearance in IE8? Thus, we could inspect it locally and help you in your particular scenario.  

Kind regards,
Kate
the Telerik team
Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
0
Nitish
Top achievements
Rank 1
answered on 03 May 2012, 10:28 AM
Hello Telerik team,
One major issue is coming in my application.i tell you the full scenerio.
I have take two radpane using one splitter.in left hand pane, there is a menu option and on right handside, the page display when we click the option from the left pane items.In the right hand side i have taken one radgrid using static header="true" property and the pagesize property.
The issue is when we change the page size 10 to 20 or 50.It shows all the rows but there is one big scrollbar coming with white space specially in IE8 and FF browser. it work fines in chrome browser.
I have rectify the issue and in that i have found that height of inbulid Iframe scroll bar is coming.

Please give solution as early as possible
0
Kate
Telerik team
answered on 08 May 2012, 08:47 AM
Hello Nitish,

I would suggest that you open a support ticket where you can send us your code so we can test it locally and help you out since the information that you provided is not sufficient for us to replicate the described behavior.

All the best,
Kate
the Telerik team
Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
Tags
Menu
Asked by
Tom
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Tom
Top achievements
Rank 1
Nitish
Top achievements
Rank 1
Kate
Telerik team
Princy
Top achievements
Rank 2
kianno
Top achievements
Rank 1
Rumen
Telerik team
Share this question
or