[Solved] Shopping Cart in RadMenu

[Jakub]

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

[Boyan Dimitrov]

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

[Jakub]

Thank you. It was helpful.

How about the first problem? Could anybody help on that?

[Boyan Dimitrov]

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

[Jakub]

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