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

Splitbutton show contextmenu

4 Answers 254 Views

Button

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

Christian asked on 23 Mar 2011, 02:51 PM

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?

4 Answers, 1 is accepted

answered on 25 Mar 2011, 12:12 PM

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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

Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!