group offset

6 posts, 0 answers
  1. Christian
    Christian avatar
    64 posts
    Member since:
    Apr 2008

    Posted 18 Jun 2014 Link to this post

    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>

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 20 Jun 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Christian
    Christian avatar
    64 posts
    Member since:
    Apr 2008

    Posted 23 Jun 2014 Link to this post

    please see attached images, I need the templates/groups aligned regardless of the items width.
  5. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 26 Jun 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Christian
    Christian avatar
    64 posts
    Member since:
    Apr 2008

    Posted 26 Jun 2014 in reply to Boyan Dimitrov Link to this post

    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
  7. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 01 Jul 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017