Hi 

 

http://demos.telerik.com/aspnet-ajax/menu/examples/functionality/templates/defaultcs.aspx for this demo is possible for sub menu ? Can you give some example ?

http://demos.telerik.com/aspnet-ajax/menu/examples/functionality/templates/defaultcs.aspx

Hello Sajith,

You can use the same approach if you want to show the template when expanding a sub-menu. Instead of setting a Template to the root items it can be set to the child items (in the example below the "Asia" and "Africa" items):

The following CSS rule needs to be modified, in order not to affect the dropdown holding the two child items:
​
Regards,
Ivan Danchev
Telerik

Its Not working in Chrome,  But In IE looks OK., This is the Way I was looking for. Can you please check whats wrong with in Chrome..

 

Also in CSS part 

 I Changed color from 

---------------------------------------

html div.RadMenu_Glow .rmPopup {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
}

to this:

---------------------------------------

html div.RadMenu_Glow .rmPopup {
    background: none repeat scroll 0 0 rgba(104, 176, 237, .75);

 

Color Change OK in Chrome but displays  Dark Gray in IE

 

 

Hi Can help me how i can Achieve layout like this...? http://grapcotooling.com/menu_item.html

I need Sub menu and and sub menu for a sub menu. Please help

Related to above post : Please copy and paste link in new window if this is not opening (http://grapcotooling.com/menu_item.html)

Hello Sajith,

I attached a sample page with the Menu demo modified to look closer to the one from your screenshot and you can further customize it to achieve the desired appearance. While our demos demonstrate the controls capabilities and functionality, customization according to specific requirements is up to the developer to implement.

Regards,
Ivan Danchev
Telerik

Hi Thanks for the sample file. I have code in site.Master page as follows

 

  <form runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" AsyncPostBackTimeout="600"></telerik:RadScriptManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel" ClientIDMode="Static" runat="server" Skin="Simple"></telerik:RadAjaxLoadingPanel>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel"></telerik:RadAjaxManager>

 

<div class="MainManuContainer">
            <telerik:RadMenu RenderMode="Lightweight" runat="server" ID="RadMenu1" Skin="Glow" >
                <DefaultGroupSettings Height="270px" />
                <Items>
                    <telerik:RadMenuItem Text="Continents">
                        <Items>
                            <telerik:RadMenuItem Text="Asia" GroupSettings-OffsetX="-250">
                                <ContentTemplate>
                                    <telerik:RadSiteMap runat="server" ID="RadSiteMap1" Skin="Glow" CssClass="itemContent asia">
                                        <DefaultLevelSettings ListLayout-RepeatColumns="3"></DefaultLevelSettings>
                                        <Nodes>
                                            <telerik:RadSiteMapNode Text="Afghanistan"></telerik:RadSiteMapNode>
                                            <telerik:RadSiteMapNode Text="Bangladesh"></telerik:RadSiteMapNode>
                                            <telerik:RadSiteMapNode Text="Cambodia"></telerik:RadSiteMapNode>
                                            <telerik:RadSiteMapNode Text="China"></telerik:RadSiteMapNode>
                                            <telerik:RadSiteMapNode Text="India"></telerik:RadSiteMapNode>
                                            <telerik:RadSiteMapNode Text="Indonesia"></telerik:RadSiteMapNode>
                                            <telerik:RadSiteMapNode Text="Iran"></telerik:RadSiteMapNode>
                                            <telerik:RadSiteMapNode Text="Iraq"></telerik:RadSiteMapNode>
                                            <telerik:RadSiteMapNode Text="Japan"></telerik:RadSiteMapNode>
                                        </Nodes>
                                    </telerik:RadSiteMap>
                                </ContentTemplate>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Africa" GroupSettings-OffsetX="-250">
                                <ContentTemplate>
                                    <telerik:RadSiteMap runat="server" ID="RadSiteMap2" Skin="Glow" CssClass="itemContent africa">
                                        <DefaultLevelSettings ListLayout-RepeatColumns="3"></DefaultLevelSettings>
                                        <Nodes>
                                            <telerik:RadSiteMapNode Text="Algeria "></telerik:RadSiteMapNode>
                                            <telerik:RadSiteMapNode Text="Angola "></telerik:RadSiteMapNode>
                                            <telerik:RadSiteMapNode Text="Cameroon "></telerik:RadSiteMapNode>
                                            <telerik:RadSiteMapNode Text="Ethiopia "></telerik:RadSiteMapNode>
                                            <telerik:RadSiteMapNode Text="Gabon "></telerik:RadSiteMapNode>
                                            <telerik:RadSiteMapNode Text="Guinea "></telerik:RadSiteMapNode>
                                            <telerik:RadSiteMapNode Text="Kenya "></telerik:RadSiteMapNode>
                                            <telerik:RadSiteMapNode Text="Madagascar "></telerik:RadSiteMapNode>
                                            <telerik:RadSiteMapNode Text="Morocco "></telerik:RadSiteMapNode>
                                        </Nodes>
                                    </telerik:RadSiteMap>
                                </ContentTemplate>
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenu>
        </div>

But menu appearing as blank, can you check what I am missing.  When adding following block its giving me run time error. Css part is all in seperate CSS file.

Hello Sajith,

I attached a .zip file containing Master and Content pages. At my end the Menu works correctly in this scenario, here's a short video to demonstrate that.

As for the error you are getting when you try to add an asp:ScriptManager, I noticed that you already have added a RadScriptManager on the master page, so it is expected that an exception will be thrown if you attempt to add another ScriptManager instance. Only one instance should be present on the page (Master), there is no need to declare more instances on the content pages, or UserControls.

Regards,
Ivan Danchev
Telerik

Above Sample was working .. How can i customize above code as in picture attached.. Please help 

Hello Sajith,

You can place the items in the sub-menus into 3 columns by setting the RepeatColumns property in DefaultGroupSettings to 3:


On the third point, what you mean by "need small highlight"?

Regards,
Ivan Danchev
Telerik

Hi Ivan,

thanks for your help.

RepeatColumns  property repeating the image for the menu item, i dont want to image to me repeated in each column. and grey/yellow  hilight of the menu item hover length is up to menu item frame width, I need that to be small. Please see image attached you can understand better.

 

 

 

 

Hello Sajith,

The issue with the image being displayed for all columns can be solved by changing the CSS rule's selector:

As for the second question, the highlight effect cannot be limited to just a part of the item's length, because it is achieved with background color. Setting the background color means the whole item will be colored on hover, i.e. the highlight effect will be just as big as the item itself.

Regards,
Ivan Danchev
Telerik

Hi I can able to achieve the layout i want, but only issue is that offsetting the sub menu in the wrong position. Please see the output Iam getting marked as wrong in picture attached and output i want as marked with tick mark in picture. Also attached CSS and menu item code in master page  "MasterPage.master". Please let me know what changes i need to offset sub menu in  in proper position.


thanks

Please help me on the above...

Hello Sajith,

The submenus offset can be set through the OffsetX and OffsetY properties, so you can set them like this for the items under Menu Item 2:


Regards,
Ivan Danchev
Telerik

Thanks for quick reply... Let me try..

Above suggestion works perfect. One more thing

Refering to this picture :

http://www.telerik.com/clientsfiles/d0ceebd5-2734-4d3e-88aa-ce94b3c0db16_submenu.png?sfvrsn=0

How can each menu iten can different pictures  ?

 

Now Iam using : 

above CSS for level 1 it gives same picture in each menu.

 

Please help.

 

 

Hi Ivan

Everything looks ok. but ended up with 2 issues.

1. Need different images for different menu.

2. in sub menu and sub-sub menu leaves a black box area if there is no enough menu item ( if there its not multiple of 3) . please see pic attached

Code with latest css is here :

Can you help me regarding above post that please ?

Hello Sajith,

Different background images can be set to different submenus by using separate rules with the correct corresponding selector, for example: html div.RadMenu_Glow .rmItem:nth-of-type(1) .rmSlide .rmFirstGroupColumn .rmLevel1
As for the differently colored part of the submenus it comes from the different height of the li elements with class rmGroupColumn and the ul element with class rmMultiColumn that contains the li elements. You are not setting the background of the ul element, furthermore the li elements have opacity set to their background, which results in the observed appearance.

Regards,
Ivan Danchev
Telerik

Regarding first Question:

I set 

For Firrt submenu but its not working.

 

For second Question: can you give me an example code please ?

thanks

Hello Sajith,

As I mentioned in one of my previous replies, fulfilling custom CSS requirements falls outside the scope of the support services. If you believe there is an issue with the control's functionality or appearance, or in some other aspect it does not work properly, please open a support ticket attaching a runnable sample, which reproduces the problem. 

Regards,
Ivan Danchev
Telerik

HI Ivan 
I can able to manage and  everything looks ok in Chrome and FireFox but Internet explorer giving wrong. Working copy of code is attached also screen shot from both browser;
Please help. Please see the working code.

Hello Sajith,

It seems the screenshots did not attach properly to your reply. Could you specify which IE version you have an issue in and try reattaching the screenshots?

Regards,
Ivan Danchev
Telerik

Hi Ivan,

 

Screen shot attached, please check. Thanks

Iam using IE 11

Did you able to check, I tried my max but IE gives wrong 

Hello Sajith,

I tested the menu in IE11 and this is how it looks like at my end. The sample image I replaced "three.png" with is visible.

Regards,
Ivan Danchev
Telerik

Hi Ivan,

You are right, It was not showing on IE because of previous change in Cached on IE, its ok now. Thanks for your help.

 

I have a small issue with Zindexing (i believe). I am opening a window using RadWindowManager control bu i need this window on top of menu layer. What property i need to setting menu  or window? Following is the code I am using to open window.