Telerik Forums / UI for ASP.NET AJAX Forum / Menu /

menu like telerik

Telerik UI for ASP.NET AJAX
Resources Buy Try

25 posts, 0 answers

Tom

10 posts

Member since:
May 2010

Posted 21 Jun 2010 Link to this post

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.
Shinu

17764 posts

Member since:
Mar 2007

Posted 22 Jun 2010 Link to this post

Hello,

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

-Shinu.
Tom

10 posts

Member since:
May 2010

Posted 23 Jun 2010 Link to this post

Thanks.
Nitish

11 posts

Member since:
Mar 2011

Posted 30 Mar 2011 Link to this post

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.
Kate
Admin

1898 posts

Posted 30 Mar 2011 Link to this post

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

Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!
Nitish

11 posts

Member since:
Mar 2011

Posted 30 May 2011 Link to this post

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.
Princy

17421 posts

Member since:
Mar 2007

Posted 30 May 2011 Link to this post

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.
Nitish

11 posts

Member since:
Mar 2011

Posted 30 May 2011 Link to this post

<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>
Kate
Admin

1898 posts

Posted 02 Jun 2011 Link to this post

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.
Nitish

11 posts

Member since:
Mar 2011

Posted 05 Jun 2011 Link to this post

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
Kate
Admin

1898 posts
Posted 06 Jun 2011 Link to this post

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.

ComboBoxinMenuItemTemplate.zip
Nitish

11 posts

Member since:
Mar 2011

Posted 07 Jun 2011 Link to this post

Thanks a lot Kate. Awesome work dear.
kianno

1 posts

Member since:
Jun 2011
Posted 29 Jul 2011 Link to this post

Hi,

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

megamenuwithsubmenu.jpg
Kate
Admin

1898 posts

Posted 29 Jul 2011 Link to this post

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.
Nitish

11 posts

Member since:
Mar 2011

Posted 07 Sep 2011 Link to this post

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.
Princy

17421 posts

Member since:
Mar 2007

Posted 07 Sep 2011 Link to this post

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.
Kate
Admin

1898 posts

Posted 07 Sep 2011 Link to this post

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 >>
Nitish

11 posts

Member since:
Mar 2011

Posted 12 Sep 2011 Link to this post

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.
Shinu

17764 posts

Member since:
Mar 2007

Posted 12 Sep 2011 Link to this post

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.
Nitish

11 posts

Member since:
Mar 2011

Posted 13 Oct 2011 Link to this post

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>
Rumen
Admin

14462 posts

Posted 18 Oct 2011 Link to this post

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.
Nitish

11 posts

Member since:
Mar 2011

Posted 19 Nov 2011 Link to this post

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
Kate
Admin

1898 posts

Posted 22 Nov 2011 Link to this post

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.
Nitish

11 posts

Member since:
Mar 2011

Posted 03 May 2012 Link to this post

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
Kate
Admin

1898 posts

Posted 08 May 2012 Link to this post

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.

menu like telerik

Tom

Shinu

Tom

Nitish

Kate

Nitish

Princy

Nitish

Kate

Nitish

Kate

Nitish

kianno

Kate

Nitish

Princy

Kate

Nitish

Shinu

Nitish

Rumen

Nitish

Kate

Nitish

Kate