Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

RadMenu with multiple columns:one column and a second column of white space

4 Answers 188 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Le Danh
Top achievements
Rank 1
Le Danh asked on 29 Dec 2010, 09:53 AM
Hi,
I have already seen the error folowing path: http://www.telerik.com/community/forums/aspnet-ajax/menu/296630-multi-column-menu.aspx.
Now i use the Telerik with version: 2010.1.421.20. Can you send Service pack to fix this error?

Also, i want to fix other error: space of "Root RadMenuItem1" element to "|" element is small. My coding is below:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
 <style type="text/css">
    
    body
    {
        margin: 0 auto;
        padding: 0;
        text-align: center;
        width: 1000px;
    }
    

     
    
</style>    
<script type="text/javascript">


    function OnClientItemOpeningHandler(sender, args) {

        var item = args.get_item();
        // runtime positining of the submenu
        setTimeout(function() {
            var offset = item.get_element().clientWidth - item.get_childListElement().clientWidth;
            $telerik.$(".rmSlide").css("left", offset/2);
        }, 0);

    }
    
</script>    
</head>
<body>
    <form id="mainForm" method="post" runat="server">
        <telerik:RadScriptManager ID="ScriptManager" runat="server" />
        <table><tr>
        <td><img width="150" height="25"  src="../Common/Images/Common/BLANK.GIF" alt="" /></td>
        <td>
        
         <div >
            <telerik:RadMenu ID="RadMenu2" runat="server" Skin="Office2007" EnableEmbeddedSkins="False"  OnClientItemOpening="OnClientItemOpeningHandler">
                
                <DefaultGroupSettings RepeatColumns="5" RepeatDirection="Vertical" OffsetY="-1" OffsetX="-20" />
                <Items>
                    <telerik:RadMenuItem CssClass="HoaNguyen-TopMenu" runat="server" Text="Root RadMenuItem1" >
                        <Items>
                            <telerik:RadMenuItem CssClass="HoaNguyen-TopMenuLevelTwo" runat="server" Text="Child RadMenuItem 1">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem CssClass="HoaNguyen-TopMenuLevelTwo" runat="server" Text="Child RadMenuItem 2">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem CssClass="HoaNguyen-TopMenuLevelTwo" runat="server" Text="Child RadMenuItem 2">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem CssClass="HoaNguyen-TopMenuLevelTwo" runat="server" Text="Child RadMenuItem 2">
                            </telerik:RadMenuItem>                                                      
                        </Items>
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem CssClass="HoaNguyen-TopMenu" runat="server" Text="|"  ></telerik:RadMenuItem>
                    <telerik:RadMenuItem CssClass="HoaNguyen-TopMenu" runat="server" Text="Root RadMenuItem2" >
                        <Items>
                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem CssClass="HoaNguyen-TopMenu" runat="server" Text="|"  ></telerik:RadMenuItem>
                    <telerik:RadMenuItem CssClass="HoaNguyen-TopMenu" runat="server" Text="Root RadMenuItem3" >
                        <Items>
                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenu>
        </div>
</td></tr></table>



    </form>
</body>
</html>



Thanks,
PhuongLD

4 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 29 Dec 2010, 12:46 PM
Hello ,

You can set the space between the RadMenuItem" element to "|" element by using default CSS class.

CSS:
.RadMenu_Office2007 .rmLink
        {
            padding: 40px !important;
        }

Then for regarding the first query, you can refer  the following KB article.
Updating RadControls for ASP.NET to another version or license

Shinu.
0
Le Danh
Top achievements
Rank 1
answered on 30 Dec 2010, 04:32 AM
Hi Shinu,
I have already change verion of Telerik 2010 to be service pack 3 but i still don't fix this error: "RadMenu with multiple columns:first children column and a second children column of white space is very large". do you help me to fix this error?

My coding is below:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<%@ Register Assembly="Telerik.Web.UI, Version=2010.3.1215.20, Culture=neutral, PublicKeyToken=121fae78165ba3d4"
    Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Untitled Page</title>
 <style type="text/css">
    
body
{
    margin:0px;
    font-family:Arial;
    font-size:12px;
}



/*----------Public Website------------*/

/*Top Menu*/
a.HoaNguyen-TopMenu:hover{font-weight:bold;color: #da251d; text-decoration: underline;}
a.HoaNguyen-TopMenu:link{font-weight:bold;color: #006131; text-decoration: none;}
a.HoaNguyen-TopMenu:active{font-weight:bold;color: #006131; text-decoration: none;}
a.HoaNguyen-TopMenu:visited{font-weight:bold;color: #006131; text-decoration: none;}
a.HoaNguyen-TopMenu:active{font-weight:bold;color: #006131; text-decoration: none;}
a.HoaNguyen-TopMenu:hover{font-weight:bold;color: #da251d; text-decoration: underline;}

a.HoaNguyen-TopMenuLevelTwo:hover{color: #da251d; text-decoration: underline;}
a.HoaNguyen-TopMenuLevelTwo:link{color: #58707E; text-decoration: none;}
a.HoaNguyen-TopMenuLevelTwo:active{color: #58707E; text-decoration: none;}
a.HoaNguyen-TopMenuLevelTwo:visited{color: #58707E; text-decoration: none;}
a.HoaNguyen-TopMenuLevelTwo:active{color: #58707E; text-decoration: none;}
a.HoaNguyen-TopMenuLevelTwo:hover{color: #da251d; text-decoration: underline;}



/*----------End public website--------*/
    

      .rmLink
        {
            padding: 0px !important;
            cursor:pointer !important;
        }

    
</style>   

<script type="text/javascript">


    function OnClientItemOpeningHandler(sender, args) {

        var item = args.get_item();
        // runtime positining of the submenu
        setTimeout(function() {
            var offset = item.get_element().clientWidth - item.get_childListElement().clientWidth;
            $telerik.$(".rmSlide").css("left", offset/2);
        }, 0);

    }
    
</script>    
</head>
<body>
    <form id="mainForm" method="post" runat="server">
        <telerik:RadScriptManager ID="ScriptManager" runat="server" />
        <table><tr>
        <td style="width:400px">a</td>
        <td>
        
         <div >
            <telerik:RadMenu ID="RadMenu2" runat="server" Skin="" EnableEmbeddedSkins="false"  
            OnClientItemOpening="OnClientItemOpeningHandler">
                
                <DefaultGroupSettings RepeatColumns="2" OffsetY="-1" OffsetX="-20" />
                <Items>
                    <telerik:RadMenuItem CssClass="HoaNguyen-TopMenu" runat="server" Text="Root RadMenuItem1" >
                        <Items>
                            <telerik:RadMenuItem CssClass="HoaNguyen-TopMenuLevelTwo" Selected="true" runat="server" Text="Child RadMenuItem 1">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem CssClass="HoaNguyen-TopMenuLevelTwo" runat="server" Text="Child RadMenuItem 2">
                            </telerik:RadMenuItem>                                                  
                        </Items>
                    </telerik:RadMenuItem>

                    <telerik:RadMenuItem CssClass="HoaNguyen-TopMenu" runat="server" Text="|" Enabled="False"  ></telerik:RadMenuItem>
                    <telerik:RadMenuItem CssClass="HoaNguyen-TopMenu" runat="server" Text="Root RadMenuItem2" >
                        <Items>
                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem CssClass="HoaNguyen-TopMenu" runat="server" Text="|"  IsSeparator="True"></telerik:RadMenuItem>
                    <telerik:RadMenuItem CssClass="HoaNguyen-TopMenu" runat="server" Text="Root RadMenuItem3" >
                        <Items>
                            <telerik:RadMenuItem  runat="server" Text="Child RadMenuItem 1">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem  runat="server" Text="Child RadMenuItem 2">
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenu>
        </div>
</td></tr></table>





    </form>
</body>
</html>

Thank you,


PhuongLD


0
Le Danh
Top achievements
Rank 1
answered on 30 Dec 2010, 04:49 AM
KeepStatus.jpg
Hi Shinu,
I fixed this error temporary by way: I change stylesheet to my page:
    .rmText
    {
         padding: 3px !important;
    }
But this issue still happens when length of children item is diffrent like as:
            <telerik:RadMenu ID="RadMenu2" runat="server" Skin="" EnableEmbeddedSkins="false"  
            OnClientItemOpening="OnClientItemOpeningHandler">
                
                <DefaultGroupSettings RepeatColumns="5" OffsetY="-1" OffsetX="-20" />
                <Items>
                    <telerik:RadMenuItem CssClass="HoaNguyen-TopMenu" runat="server" Text="Product" >
                        <Items>
                            <telerik:RadMenuItem CssClass="HoaNguyen-TopMenuLevelTwo" runat="server" Text="Software">
                            </telerik:RadMenuItem>  
  
    <telerik:RadMenuItem CssClass="HoaNguyen-TopMenu" runat="server" Text="|" Enabled="False" ></telerik:RadMenuItem>
                            
                            <telerik:RadMenuItem CssClass="HoaNguyen-TopMenuLevelTwo" runat="server" Text="Network">
                            </telerik:RadMenuItem>    

                        </Items>
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenu>

Now, i have other issue:
i want to keep menu display on other page when i click one item of childrent menu and redirect other page. I think that JavaScript to be the solution for this issue.

Please, you see attached file. Example: I click "Child RadMenuItem 3" on "Default2.aspx" page. After this link open "Default3.aspx" page and keep the menu display on this page.

Do you help me to fix errors?

Thanks,
PhuongLD
0
Shinu
Top achievements
Rank 2
answered on 30 Dec 2010, 07:18 AM
Hello,

One suggestion is to use the Session variable to save the selected item value and retrieve the value in the redirected page.  If you want to preserve the expanded state in the redirect page, then you can achieve this using client side code by accessing corresponding item and invoking the open() method. 

Also refer the following documentationfor more on RadMenuItem client object.
RadMenuItem object

Shinu.
Tags
Menu
Asked by
Le Danh
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Le Danh
Top achievements
Rank 1
Share this question
or