Context Menu for RadSplitBar

3 posts, 0 answers
  1. Karl-Heinz
    Karl-Heinz avatar
    10 posts
    Member since:
    Jun 2012

    Posted 17 Jul 2018 Link to this post

    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:

     

    <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. Rumen
    Admin
    Rumen avatar
    13945 posts

    Posted 20 Jul 2018 Link to this post

    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>
     
    <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.
  3. Karl-Heinz
    Karl-Heinz avatar
    10 posts
    Member since:
    Jun 2012

    Posted 20 Jul 2018 in reply to Rumen Link to this post

    Dear Rumen,

    Many thanks for your help.

    Kind Regards

    Karl-Heinz

Back to Top