Splitbutton show contextmenu

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

    Posted 23 Mar 2011 Link to this post

    I have been playing around with the button with splitbutton enabled, trying to show a contextmenu.

    having read articles on the subject none seem to do the trick, or atleast not the way i want it to.

    setting the target element of contextmenu only applies when user right-clicks, and is catched on the whole button, not the splitbutton.

    Using this script i get
    "Unable to get value of the property 'relatedTarget': object is null or undefined"

    function showMenu(e)
     {
        var contextMenu = $find("<%ctl00_phHead_pbCaseDetails_i0_i0_RadContextMenu1");
        if ((!e.relatedTarget) || (!$telerik.isDescendantOrSelf(contextMenu.get_element(), e.relatedTarget)))
        {
           contextMenu.show(e);
        }
        $telerik.cancelRawEvent(e);
    }

    <telerik:RadButton ID="btnCaseSave" runat="server" EnableSplitButton="True" AutoPostBack="false" 
        Skin="Windows7" Text="Spara" OnClientClicked="showMenu(event)">
    </telerik:RadButton>
    <telerik:RadContextMenu ID="RadContextMenu1" runat="server" Skin="Windows7">
    <Targets>
    <telerik:ContextMenuElementTarget ElementID="ctl00_phHead_pbCaseDetails_i0_i0_btnCaseSave" />
    </Targets>
        <Items>
            <telerik:RadMenuItem Text="Spara och avsluta">
            </telerik:RadMenuItem>
        </Items>
    </telerik:RadContextMenu>


    How do i get the contextmenu to show on left-click on splitbutton only, and keep postback method on the main button?
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 23 Mar 2011 Link to this post

    Hi Christian,

    We have a an example in our online demos showing how this scenario can be achieved: split button demo.

    Kind regards,
    Pero
    the Telerik team
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Christian
    Christian avatar
    64 posts
    Member since:
    Apr 2008

    Posted 23 Mar 2011 Link to this post

    Hello Pero and thank you for the quick reply,

    using this script i get the contextmenu to show when i click on both the mainbutton and the splitbutton.

    when clicking on the mainbutton i want to do a postback (server-side method) 

    when clicking on the splitbutton i want the contextbutton to show
    and each of the contextmenu buttons should do a postback/run server-side method.

    is this functinality supported?
  5. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 25 Mar 2011 Link to this post

    Hello Christian,

    Yes this functionality can be easily achieved by using the client-side API of the button control. For your convenience I created a sample project based on the online demo, suggested in my previous reply. Here is the code of the project:

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!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>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadScriptBlock runat="server">
            <script type="text/javascript">
                function OnClientClicked(sender, args)
                {
                    if (args.IsSplitButtonClick())
                    {
                        var currentLocation = $telerik.getLocation(sender.get_element());
                        var contextMenu = $find("<%=RadContextMenu1.ClientID%>");
                        contextMenu.showAt(currentLocation.x, currentLocation.y + 22);
                        sender.set_autoPostBack(false);
                    }
                    else
                    {
                        sender.set_autoPostBack(true);
                    }
                }
            </script>
        </telerik:RadScriptBlock>
        <telerik:RadButton EnableSplitButton="true" ID="SplitButton" runat="server" Text="Main Button"
            OnClick="RadButton1_Click" OnClientClicked="OnClientClicked">
        </telerik:RadButton>
        <telerik:RadContextMenu ID="RadContextMenu1" runat="server" OnItemClick="RadMenu1_ItemClick">
            <Items>
                <telerik:RadMenuItem Text="Menu Item 1">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Menu Item 2">
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadContextMenu>
        <br />
        <asp:Label ID="Label1" runat="server" />
        </form>
    </body>
    </html>

    using System;
    using Telerik.Web.UI;
     
    public partial class Default_Button : System.Web.UI.Page
    {
        protected void RadMenu1_ItemClick(object sender, RadMenuEventArgs e)
        {
            Label1.Text = "The MENU was clicked!";
     
        }
        protected void RadButton1_Click(object sender, EventArgs e)
        {
            Label1.Text = "THe Button was clicked!";
        }
    }


    Greetings,
    Pero
    the Telerik team
  6. Christian
    Christian avatar
    64 posts
    Member since:
    Apr 2008

    Posted 25 Mar 2011 Link to this post

    All works great, thank you for submitting the the sample!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017