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

Context Menu for RadSplitBar

2 Answers 85 Views

Splitter

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

Karl-Heinz asked on 17 Jul 2018, 08:47 AM

Hello,

I want to use a context menu for RadSplitBar's. The following code shows the set-up of my test page - it is based on the Telerik trial software R2 2018 for ASP.NET Ajax:

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

<head runat="server">

<title></title>

<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<script type="text/javascript">

//Put your JavaScript code here.

</script>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

</telerik:RadAjaxManager>

<div>

<telerik:RadContextMenu runat="server" ID="ContextMenu1">

<Targets>

<telerik:ContextMenuElementTarget ElementID="RadSplitBar1" />

</Targets>

<Items>

<telerik:RadMenuItem Text="Lock" Value="L" />

<telerik:RadMenuItem Text="Unlock" Value="U" />

</Items>

</telerik:RadContextMenu>

<telerik:RadSplitter ID="RadSplitter1" runat="server">

<telerik:RadPane ID="RadPane1" runat="server">

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar1" runat="server">

</telerik:RadSplitBar>

<telerik:RadPane ID="RadPane2" runat="server">

</telerik:RadPane>

</telerik:RadSplitter>

</div>

</form>

</body>

</html>

The context menu is always visible if I use Windows 7 to check my test page. Windows 10 sparks problems:

Google Chrome shows the context menu (Version: 67.0.3396.99), but the context menu is not available in Internet Explorer (Version: 11.165.17134.0) and Microsoft Edge (Version: 42.17134.1.0).

Any help would be appreciated.

2 Answers, 1 is accepted

answered on 20 Jul 2018, 09:12 AM

Hello Karl-Heinz,

The RadSplitBar1 is more complex drag bar handler that it looks and to attach a context menu over it, you will need to attach it to its overlay element with class name .rspHelperBarDrag too. For your convenience I created a complete cross browser solution:

<!DOCTYPE html>

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

<head runat="server">

<title></title>

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<telerik:RadSplitter ID="RadSplitter1" runat="server">

<telerik:RadPane ID="RadPane1" runat="server">

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar1" runat="server">

</telerik:RadSplitBar>

<telerik:RadPane ID="RadPane2" runat="server">

</telerik:RadPane>

</telerik:RadSplitter>

<script type="text/javascript">

function pageLoad() {

var menu = $find("ContextMenu1");

menu.addTargetElement($telerik.$(".rspHelperBarDrag")[0]);

menu.addTargetElement($telerik.$("#RadSplitBar1")[0]);

}

</script>

<div>

<telerik:RadContextMenu runat="server" ID="ContextMenu1">

<Targets>

<telerik:ContextMenuElementTarget ElementID="RadSplitBar1" />

</Targets>

<Items>

<telerik:RadMenuItem Text="Lock" Value="L" />

<telerik:RadMenuItem Text="Unlock" Value="U" />

</Items>

</telerik:RadContextMenu>

</div>

</form>

</body>

</html>

Regards,
Rumen
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.