This is a migrated thread and some comments may be shown as answers.

Shopping Cart in RadMenu

4 Answers 44 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Jakub
Top achievements
Rank 1
Jakub asked on 28 Aug 2013, 07:56 AM
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

4 Answers, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 02 Sep 2013, 08:47 AM
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.
0
Jakub
Top achievements
Rank 1
answered on 06 Sep 2013, 07:47 AM
Thank you. It was helpful.

How about the first problem? Could anybody help on that?
0
Boyan Dimitrov
Telerik team
answered on 11 Sep 2013, 10:54 AM
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.
0
Jakub
Top achievements
Rank 1
answered on 16 Sep 2013, 07:16 AM
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
Tags
Menu
Asked by
Jakub
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Jakub
Top achievements
Rank 1
Share this question
or