Open RadMenuItem on 100% width of the page

4 posts, 0 answers
  1. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 12 Mar 2014 Link to this post

    Hello

    I am currently working on a web project that requires the use of RadMenu. 
    When the user clicks on RadMenuItem, the Mega Dropdown Menu appears, like this: 
    http://demos.telerik.com/aspnet-ajax/menu/examples/megadropdown/defaultvb.aspx?#qsf-demo-source

    The menu is located inside a DIV that is 300px wide.  
    When the user clicks on the RadMenuItem, I want the Dropdown Menu to open on 100% width of the page.
    How can I do this? 

    Thank you,
    Daniel
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 13 Mar 2014 in reply to Daniel Link to this post

    Hi Daniel,

    Please try the following code snippet to achieve your scenario.

    ASPX:
    <telerik:RadMenu runat="server" ID="RadMenu1" Skin="Sitefinity" OnClientItemOpened="itemOpened" Width="880" Height="60" EnableShadows="true">
        <Items>
            <telerik:RadMenuItem Text="Products" PostBack="false">
                <Items>
                    <telerik:RadMenuItem CssClass="Products" Width="1500">
                        <ItemTemplate>
                            <div id="CatWrapper" class="Wrapper" style="width: 80%;">
                                       ...
                            </div>
                        </ItemTemplate>
                </telerik:RadMenuItem>
                      ...
              </Items>
             </telerik:RadMenuItem>
                ...
    </telerik:RadMenu>

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 18 Mar 2014 in reply to Shinu Link to this post

    Hi Shinu,

    Thank for your answer. 
    Your solution is good but it's not what I need.
    I want the RadMenuItem's width to be exactly as the whole page width.
    I don't want a fixed amount of pixels, because for example, if my browser's window's width is only 600 pixels, then the RadMenuItem will not be fully inside the window.
    Perhaps you can provide me with a different code that always places the RadMenuItem fully inside the window, while its width is exactly the width of the page?




  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 19 Mar 2014 in reply to Daniel Link to this post

    Hi Daniel,

    Please try the following sample code snippet which works fine at my end.

    ASPX:
    <telerik:RadMenu runat="server" ID="RadMenu1" Skin="Sitefinity" Height="60" EnableShadows="true">
        <Items>
            <telerik:RadMenuItem Text="Products" PostBack="false">
                <Items>
                    <telerik:RadMenuItem CssClass="Products" Width="850%">
                        <ItemTemplate>
                            <div id="CatWrapper" class="Wrapper" style="width: 65%;">
                                ...      
                            </div>
                            <div id="FeatProduct" style="width: 25%;">
                                ...                  
                            </div>
                        </ItemTemplate>
                </telerik:RadMenuItem>
                      ...
              </Items>
             </telerik:RadMenuItem>
                ...
    </telerik:RadMenu>

    Thanks,
    Shinu.
Back to Top