Shopping Cart in RadMenu

5 posts, 0 answers
  1. Jakub
    Jakub avatar
    5 posts
    Member since:
    Aug 2013

    Posted 28 Aug 2013 Link to this post

    Hello!

    I'would like to build a shopping cart inside a RadMenu item.

    I want it to work like this:
    -User click "Add to Cart" button.
    -A menu item containing the cart automatically expands
    -While the menu item is expanded, new cart item is inserting into the cart. 
    -Menu item holds open for few more seconds.
    -Menu item is closing.

    All must be done as client side processing. 

    So far I have achieved all of these but there are 2 problems:

    1) I can't manage to auto expand the menu before an addition of the item 
    2) I can't manage to properly style the menu. What I want is to just display cart controls (RadGrid + Submit button + Clear button) but not the underlying container of the Menu Item. I have tried to set the background color to transparent but it doesn't work.. I also can't get rid of the empty space on left and right side of the grid. 

    I'm attaching an image for reference.

    Markup of my RadMenu:

    <telerik:RadMenu ID="menu" runat="server" Width="100%" ClientIDMode="Static" CssClass="Container " EnableEmbeddedBaseStylesheet="True" EnableAjaxSkinRendering="False">
                 <Items>
                     <telerik:RadMenuItem runat="server" Text="Home" NavigateUrl="~/Home.aspx">
                     </telerik:RadMenuItem>
                     <telerik:RadMenuItem runat="server" Text="Inventory" NavigateUrl="~/Inventory.aspx">
                     </telerik:RadMenuItem>
                     <telerik:RadMenuItem runat="server" Text="My Account" NavigateUrl="~/MyAccount.aspx">
                     </telerik:RadMenuItem>
                     <telerik:RadMenuItem runat="server" Text="Support" NavigateUrl="~/Support.aspx">
                         <Items>
                             <telerik:RadMenuItem runat="server" Text="FAQ">
                             </telerik:RadMenuItem>
                             <telerik:RadMenuItem runat="server" Text="Shipping">
                             </telerik:RadMenuItem>
                             <telerik:RadMenuItem runat="server" Text="Payments">
                             </telerik:RadMenuItem>
                         </Items>
                         <GroupSettings Flow="Horizontal" />
                     </telerik:RadMenuItem>
                     <telerik:RadMenuItem runat="server" Text="Cart">
                         <Items>
                             <telerik:RadMenuItem runat="server" Text="SubCart" CssClass="Cart" ExpandedCssClass="Cart" OuterCssClass="Cart">
                                 <ItemTemplate>
                                     <telerik:RadButton ID="btnSubmit" runat="server" Text="Submit" ButtonType="StandardButton"></telerik:RadButton>
                                     <telerik:RadButton ID="btnClear" runat="server" Text="Clear"></telerik:RadButton>
                                 </ItemTemplate>
                             </telerik:RadMenuItem>
                         </Items>
                     </telerik:RadMenuItem>
                     <telerik:RadMenuItem runat="server" Text="Register" NavigateUrl="~/Register.aspx">
                     </telerik:RadMenuItem>
                 </Items>
             </telerik:RadMenu>

    The RadGrid control inside of the menu is added dynamically (VB.NET):
    grid = Functions.CreateCartGrid("grdCart")
    menu.FindItemByText("SubCart").Controls.Add(grid)

    Jacob
  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 02 Sep 2013 Link to this post

    Hello,

    In order to clear the empty space on the left and right side of the embedded RadGrid please use the following styles:
    //css

    <style type="text/css">
            html .RadMenu .rmGroup, html .RadMenu .rmMultiColumn, html .RadMenu .rmGroup .rmVertical {
                background: none;
            }
     
            html .RadMenu .rmGroup .rmText {
                padding-left: 0px;
                padding-right: 0px;
            }
        </style>

    Hope that this will be helpful.

    Regards,
    Boyan Dimitrov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jakub
    Jakub avatar
    5 posts
    Member since:
    Aug 2013

    Posted 06 Sep 2013 Link to this post

    Thank you. It was helpful.

    How about the first problem? Could anybody help on that?
  5. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 11 Sep 2013 Link to this post

    Hello,

    I would like to apologize for the missed question.

    An easy and convenient way of expanding a specific RadMenu item could be achieved by using the following code snippet:
    //JavaScript
    var menu = $find("<%= RadMenu1.ClientID %>");
    var cartItem = menu.findItemByText("Cart");
    cartItem.open();


    Regards,
    Boyan Dimitrov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. Jakub
    Jakub avatar
    5 posts
    Member since:
    Aug 2013

    Posted 16 Sep 2013 Link to this post

    Hi Boyan,

    I'm taking first steps on ASP and I have no experience on Java.

    Could you please provide me with a small sample (preferably in VB.NET)?

    To make the exemple easy I would need as follow:

    A menu on a master page with 1 item containing a label control in template.
    Rad button on another page which is linked to the master page.
    Button click needs to update the label in the menu on Ajax followed by menu item epand and lasting expanded for a couple of seconds.

    Thank you in advance,
    Jacob
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017