group offset

[Christian]

By default the offset is set relative to its parent item, but is there a way to have it relative to the menu object itself?

What I´m trying to achieve is have items contentTemplates use 100% width of the menu, setting offsets solves the issue until the width of the parent items is changes (i.e. changes language)


Example below, the third item 'Products' has an offset set to it, but I need it to either dynamically change depending on its parent item position or have it relative to the menu object itself, as is the position gets misplaces when the user changes language (and the items width changes).

Christian

<telerik:RadMenuItem runat="server" Text="Home" Value="home" NavigateUrl="Default.aspx">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem runat="server" Text="Company" Value="about" NavigateUrl="about.aspx">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem runat="server" Text="Products" Value="products" PostBack="false" GroupSettings-OffsetX="-216">
            <ContentTemplate>
                <div class="menuProductContent">
                    <table width="100%">
                        <tr>
                            <td style="vertical-align:top;">
                                <h1><asp:Label runat="server" ID="labProductgroupsHeader" Text="Product groups"></asp:Label></h1>
                                <telerik:RadSiteMap runat="server" ID="productIndex" EnableEmbeddedSkins="false" Skin="mrplant" DefaultLevelSettings-ListLayout-RepeatColumns="2" OnNodeDataBound="productIndex_NodeDataBound">
                                    <Nodes>
                                        <telerik:RadSiteMapNode Text="Singlestems & sprays" NavigateUrl="products.aspx?productgroup=1"></telerik:RadSiteMapNode>
                                        <telerik:RadSiteMapNode Text="flowers" NavigateUrl="products.aspx?productgroup=2"></telerik:RadSiteMapNode>
                                        <telerik:RadSiteMapNode Text="Succulents & round shaped items" NavigateUrl="products.aspx?productgroup=3"></telerik:RadSiteMapNode>
                                        <telerik:RadSiteMapNode Text="Potted and hanging bushes" NavigateUrl="products.aspx?productgroup=4"></telerik:RadSiteMapNode>
                                        <telerik:RadSiteMapNode Text="Garlands" NavigateUrl="products.aspx?productgroup=5"></telerik:RadSiteMapNode>
                                        <telerik:RadSiteMapNode Text="Trees" NavigateUrl="products.aspx?productgroup=6"></telerik:RadSiteMapNode>
                                        <telerik:RadSiteMapNode Text="Candlerings & wreaths" NavigateUrl="products.aspx?productgroup=7"></telerik:RadSiteMapNode>
                                    </Nodes>
                                </telerik:RadSiteMap>
                            </td>
                            <td style="text-align:right; vertical-align:top;">
                                <asp:Panel runat="server" ID="panSearch" DefaultButton="btnSearch">
                                    <h1><asp:Label runat="server" ID="labSearchHeader" Text="Search"></asp:Label></h1>
                                    <telerik:RadTextBox runat="server" ID="txtSearch" EmptyMessage="Partno. / Description" EnableEmbeddedSkins="false" Skin="mrplant"></telerik:RadTextBox>
                                     <telerik:RadButton runat="server" ID="btnSearch" Text="Search" EnableEmbeddedSkins="false" Skin="mrplant" OnClick="btnSearch_Click"></telerik:RadButton>
                                </asp:Panel>
                                <br />
                                <asp:Panel runat="server" ID="panPage" DefaultButton="btnPage">
                                    <%--<h1><asp:Label runat="server" ID="labPageHeader" Text="Page"></asp:Label></h1>--%>
                                    <telerik:RadNumericTextBox runat="server" ID="txtPage" NumberFormat-DecimalDigits="0" EmptyMessage="Catalogue page no." EnableEmbeddedSkins="false" Skin="mrplant"></telerik:RadNumericTextBox>
                                     <telerik:RadButton runat="server" ID="btnPage" Text="Go to" EnableEmbeddedSkins="false" Skin="mrplant" OnClick="btnPage_Click"></telerik:RadButton>
                                </asp:Panel>
                            </td>
                        </tr>

                    </table>
                </div>
            </ContentTemplate>
        </telerik:RadMenuItem>

[Boyan Dimitrov]

Hello,

Could you please show two sample screenshots of the current RadMenu items appearance and what you want to achieve. This way we can assist you in more efficient way.

Regards,
Boyan Dimitrov
Telerik

 

 

[Christian]

please see attached images, I need the templates/groups aligned regardless of the items width.

[Boyan Dimitrov]

Hello,

Please find attached a project that implements the desired functionality. I would like to explain in the next few sentences what we have applied to the project.

When the Products menu item is expanded its content is positioned to the left side of the page. In order to achieve this functionality we removed the offset value and set the following style:
/css

html .RadMenu .rmItem {
           position:static;
       }

I noticed that you have an item "Login" on the right side of the page. The rest of the styles on the page are applied if this "Login" item does have some child items and you want to have the same behavior just like "Products" when expanded - to float the content to the left side of the page. The black border shows that the content width is expanded to the page width.

Regards,
Boyan Dimitrov
Telerik

 

 

[Christian]

Hello Boyan,

Thank you for the explanation and project to demonstrate it all, I applied the static position and it worked like a charm.
Like you mentioned I have a item under the 'login' that is indeed intended to work just like 'products as well.

I do however also have a few items who´s content has a fixed width (shows up after login) which meant they aligned to the far left due to the static position, but I managed to reverse that using a simple javascript to the specific items contents.

Again, thank for the feedback and help.

Christian

[Magdalena]

Hello Christian,

It is not necessary to add any JavaScript. You can simply add a CSS class to the item wrapper, which sub-menu you would like to expand to the full width. It can be done by the property OuterCssClass. For example if you would like to expand the sub-menu of the "Login" item, you can simply add to that item your custom class

<telerik:RadMenuItem Text="Login" OuterCssClass="customClass">

and after that you can apply the static position only for this item

html .RadMenu .customClass {
    position:static;
}

Regards,
Magdalena
Telerik