RadContextMenu for RadRotator

2 posts, 0 answers
  1. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 23 Feb 2011 Link to this post

    Requirements

    RadControls version

    2010, 3, 1215, 20
    .NET version

    3.5 SP1
    Visual Studio version

    2008
    programming language

    C#, Javascript
    browser support

    all browsers supported by RadControls


    PROJECT DESCRIPTION
    This project demonstrates how to show RadContextMenu for RadRotator. In order to access corresponding RadRotator item, attach 'OnClientMouseOver' client-side event to RadRotator and save the item index in HiddenField control. Now in 'OnItemClick' event of RadContextMenu, get the index using the HidddenField value.

    ASPX:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <style type="text/css">
            .RotatorItem
            {
                width: 132px;
                height: 112px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <telerik:RadContextMenu ID="RadContextMenu1" runat="server" OnItemClick="RadContextMenu1_ItemClick">
                <Items>
                    <telerik:RadMenuItem Text="Preview">
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadContextMenu>
            <telerik:RadRotator ID="RadRotator1" runat="server" Width="264px" Height="112px"
                OnClientMouseOver="OnClientMouseOver" ItemHeight="112" ItemWidth="132" ScrollDuration="500"
                AutoPostBack="true" OnItemClick="RadRotator1_ItemClick">
                <Items>
                    <telerik:RadRotatorItem>
                        <ItemTemplate>
                            <asp:Image runat="server" ID="Image" ImageUrl='~/Images/Nature1.jpg' CssClass="RotatorItem"
                                AlternateText="Customer Image" />
                        </ItemTemplate>
                    </telerik:RadRotatorItem>
                    <telerik:RadRotatorItem>
                        <ItemTemplate>
                            <asp:Image runat="server" ID="Image1" ImageUrl='~/Images/Nature10.jpg' CssClass="RotatorItem"
                                AlternateText="Customer Image" />
                        </ItemTemplate>
                    </telerik:RadRotatorItem>
                    <telerik:RadRotatorItem>
                        <ItemTemplate>
                            <asp:Image runat="server" ID="Image2" ImageUrl='~/Images/Nature2.jpg' CssClass="RotatorItem"
                                AlternateText="Customer Image" />
                        </ItemTemplate>
                    </telerik:RadRotatorItem>
                    <telerik:RadRotatorItem>
                        <ItemTemplate>
                            <asp:Image runat="server" ID="Image3" ImageUrl='~/Images/Nature3.jpg' CssClass="RotatorItem"
                                AlternateText="Customer Image" />
                        </ItemTemplate>
                    </telerik:RadRotatorItem>
                    <telerik:RadRotatorItem>
                        <ItemTemplate>
                            <asp:Image runat="server" ID="Image3" ImageUrl='~/Images/Nature4.jpg' CssClass="RotatorItem"
                                AlternateText="Customer Image" />
                        </ItemTemplate>
                    </telerik:RadRotatorItem>
                    <telerik:RadRotatorItem>
                        <ItemTemplate>
                            <asp:Image runat="server" ID="Image3" ImageUrl='~/Images/Nature5.jpg' CssClass="RotatorItem"
                                AlternateText="Customer Image" />
                        </ItemTemplate>
                    </telerik:RadRotatorItem>
                    <telerik:RadRotatorItem>
                        <ItemTemplate>
                            <asp:Image runat="server" ID="Image3" ImageUrl='~/Images/Nature6.jpg' CssClass="RotatorItem"
                                AlternateText="Customer Image" />
                        </ItemTemplate>
                    </telerik:RadRotatorItem>
                    <telerik:RadRotatorItem>
                        <ItemTemplate>
                            <asp:Image runat="server" ID="Image3" ImageUrl='~/Images/Nature7.jpg' CssClass="RotatorItem"
                                AlternateText="Customer Image" />
                        </ItemTemplate>
                    </telerik:RadRotatorItem>
                    <telerik:RadRotatorItem>
                        <ItemTemplate>
                            <asp:Image runat="server" ID="Image3" ImageUrl='~/Images/Nature8.jpg' CssClass="RotatorItem"
                                AlternateText="Customer Image" />
                        </ItemTemplate>
                    </telerik:RadRotatorItem>
                    <telerik:RadRotatorItem>
                        <ItemTemplate>
                            <asp:Image runat="server" ID="Image3" ImageUrl='~/Images/Nature9.jpg' CssClass="RotatorItem"
                                AlternateText="Customer Image" />
                        </ItemTemplate>
                    </telerik:RadRotatorItem>
                </Items>
            </telerik:RadRotator>
            <asp:HiddenField ID="HiddenField1" runat="server" />
        </div>
        </form>
    </body>
    </html>
     
    <script type="text/javascript">
        function OnClientItemClicked(sender, args) {
     
        }
        function OnClientMouseOver(sender, args) {
            var hf = document.getElementById('HiddenField1');
            hf.value = args.get_item().get_index();
        }
    </script>

    C#:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Web.UI;
     
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            foreach (RadRotatorItem item in RadRotator1.Items)
            {
                ContextMenuControlTarget target = new ContextMenuControlTarget();
                target.ControlID = item.ID;
                RadContextMenu1.Targets.Add(target);
            }
        }
        protected void RadRotator1_ItemClick(object sender, RadRotatorEventArgs e)
        {
     
        }
        protected void RadContextMenu1_ItemClick(object sender, RadMenuEventArgs e)
        {
            int index = Convert.ToInt32(HiddenField1.Value);
        }
    }

    Thanks,
    Princy.
  2. Niko
    Admin
    Niko avatar
    387 posts

    Posted 25 Feb 2011 Link to this post

    Hi Princy,

    Thank you for your contribution! Your efforts are appreciated.


    Best wishes,
    Nikodim
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
Back to Top