RadMenu within TitleBar

9 posts, 0 answers
  1. Barbaros Saglamtimur
    Barbaros Saglamtimur avatar
    110 posts
    Member since:
    Jul 2012

    Posted 16 Jun 2009 Link to this post

    Hi,

    I would like to add a custom button to title bar and, associate a RadMenu to this button. I have read some threads about adding custom buttons to title bar, and attaching events but couldn't figured out how to add RadMenu. Is this possible?
    Any help will be greatly appreciated.
  2. Barbaros Saglamtimur
    Barbaros Saglamtimur avatar
    110 posts
    Member since:
    Jul 2012

    Posted 17 Jun 2009 Link to this post

    Ok I figured it out with Menu / Popup Menu
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 18 Jun 2009 Link to this post

    Hi barbaros,

    It is good to know that you have accomplished your task. If you want and have the time, I invite you to share your solution with the other members of our community in our Code Library


    Regards,
    Georgi Tunev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  5. Barbaros Saglamtimur
    Barbaros Saglamtimur avatar
    110 posts
    Member since:
    Jul 2012

    Posted 18 Jun 2009 Link to this post

    Sure but I still have 3 problems.Here are the steps I did. May be you can help me.

    1. For adding custom button I use this KB article
    http://www.telerik.com/support/kb/aspnet-ajax/window/adding-a-custom-button-to-radwindow-titlebar.aspx

    2. For menu I follow this sample
    http://demos.telerik.com/aspnet-ajax/menu/examples/contextmenu/popupmenu/defaultcs.aspx

    Here is complate code:

    <telerik:RadWindowManager ID="RadWindowManager2" runat="server">
            <Windows>
                <telerik:RadWindow ID="RadWindow2" runat="server" VisibleOnPageLoad="true" OnClientShow="addMenu"
                    NavigateUrl="webform3.aspx">
                </telerik:RadWindow>
            </Windows>
        </telerik:RadWindowManager>
    <Telerik:RadContextMenu id="RadContextMenu1"
                    runat="server" >
                    <Items>
                        <Telerik:RadMenuItem Text="Trees" />
                        <Telerik:RadMenuItem Text="Sunset" />
                        <Telerik:RadMenuItem Text="Mountains" />
                    </Items>
                </Telerik:RadContextMenu>        

        <script type="text/javascript">
            //<![CDATA[
            function showMenu(e) {
                var contextMenu = $find("<%= RadContextMenu1.ClientID %>");

                if ((!e.relatedTarget) || (!$telerik.isDescendantOrSelf(contextMenu.get_element(), e.relatedTarget))) {
                    contextMenu.show(e);
                }

                $telerik.cancelRawEvent(e);
            }
             function addMenu(radWindow) {
                 var TitleBar = radWindow.GetTitlebar();
                 var parent = TitleBar.parentNode;
                 var oUL = parent.getElementsByTagName('UL')[0];
                 if (!(oUL.firstChild.id == "customprintbuttonID")) // Check if the element is already added
                 {
                     // If not - create and add the custom button
                     oUL.style.width = "300px";
                     var oLI = document.createElement("LI");
                     oLI.id = "customprintbuttonID"
                     var A = document.createElement("A");
                     oLI.appendChild(A);
                     A.className = "customprintbutton";
                     A.href = "javascript:void(0)";
                     A.title = "Print Content";
                     A.onclick = function() { showMenu(event); }
                     oUL.insertBefore(oLI, oUL.firstChild);
                 }
             }
            //]]>
        </script>
    and style is as same as sample code provided on KB article

    Menu works fine.

    Problems are;
    1- Even I used exactly same code sample about adding custom buttons, custom icon is not displayed, instead minimize icon is displayed where custom button must be. (copy paste exactly same code, so I think there is a problem with this code, may be incompatible with version 2009.1.527.35). When I click it, it opens menu as expected, and all other buttons behave normal. Its just displaying icon problem, which I couldn't fix yet.
    2- When I mousedown custom button (in this case minimize icon is shown), window content disappears like mousedown event for titlebar. For title bar this is normal behavior when drag (mousedown) and drop (mouseup). By the way insted of this code on sample
     A.onmousedown = printWin;
    I use
    A.onclick = function() { showMenu(event); }
    It seems when I try to click icon (A tag), and do not release mouse button mousedown event fires for titlebar, but I am over a button. Other buttons do not behave like this.
    3- When clicked minimize (normal minimize button, not the one shown insted of custombutton), maximize and fake minimize (I call this fake, cus it must be custom button) buttons are shown at minimized mode. But this custom button must be invisible as well.

    Otherwise, everything works fine; "menu within titlebar"

    I hope someone will help me.

    Thanks and regards.
  6. Barbaros Saglamtimur
    Barbaros Saglamtimur avatar
    110 posts
    Member since:
    Jul 2012

    Posted 19 Jun 2009 Link to this post

    OK, I figured out problems #1 and 2. Here is complete code. But problem #3 still live. Any thoughts ?

         <style type="text/css">
            .rwTitlebar .rwTitlebarControls .rwcpb
            {
                background: url(printbar.gif) 0 0;
            }
            .rwTitlebar .rwTitlebarControls .rwcpb:hover
            {
                background: url(printbar.gif) 0 -26px;
            }
        </style>

    <telerik:RadWindowManager ID="RadWindowManager1" runat="server" Skin="Black">
            <Windows>
                <telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="true" OnClientShow="OnClientShow" Width="400" Height="450" Title="Deneme"
                    NavigateUrl="webform3.aspx">
                </telerik:RadWindow>
            </Windows>
        </telerik:RadWindowManager>
        <Telerik:RadContextMenu id="RadContextMenu1"
                    runat="server" >
                    <Items>
                        <Telerik:RadMenuItem Text="Trees" />
                        <Telerik:RadMenuItem Text="Sunset" />
                        <Telerik:RadMenuItem Text="Mountains" />
                    </Items>
                </Telerik:RadContextMenu>    

    <script type="text/javascript">
    function OnClientShow(radWindow)
    {
        var TitleBar = radWindow.GetTitlebar();
        var parent = TitleBar.parentNode;
        var oUL = parent.getElementsByTagName('UL')[0];
        if (!(oUL.firstChild.id == "customprintbuttonID")) // Check if the element is already added
        {
            // If not - create and add the custom button
            oUL.style.width = "186px";
            var oLI = document.createElement("LI");
            oLI.id = "customprintbuttonID"
            var A = document.createElement("A");
            oLI.appendChild(A);
            A.className = "rwcpb";
            A.href = "javascript:void(0);";
            A.title = "Menu";
            A.onmousedown = function() { moudwn(event); };
            A.onclick = function() { showMenu(event); }
            var spn = document.createElement("SPAN");
            spn.innerHTML = "Menu";
            A.appendChild(spn);
            oUL.insertBefore(oLI, oUL.firstChild);
        }
    }
    function showMenu(e) {
            var contextMenu = $find("<%= RadContextMenu1.ClientID %>");

            if ((!e.relatedTarget) || (!$telerik.isDescendantOrSelf(contextMenu.get_element(), e.relatedTarget))) {
                contextMenu.show(e);
            }

            $telerik.cancelRawEvent(e);
        }
        function moudwn(e) {
            if (window.event)
                window.event.cancelBubble = true;
            else
                e.stopPropagation();
            return false;
        }
       </script>


  7. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 19 Jun 2009 Link to this post

    Hello Barbaros,

    We already answered your support ticket.

    All the best,
    Fiko
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  8. Barbaros Saglamtimur
    Barbaros Saglamtimur avatar
    110 posts
    Member since:
    Jul 2012

    Posted 19 Jun 2009 Link to this post

    Thanks for your answer, but problem #3 still exists in your solution too.
  9. Barbaros Saglamtimur
    Barbaros Saglamtimur avatar
    110 posts
    Member since:
    Jul 2012

    Posted 19 Jun 2009 Link to this post

    OK, I got it, problem #3 solved. Here is final code. I had to modify your code, you can find changes commented.

    <style type="text/css">
            .custommenubutton
            {
                background: url(images/printbar.gif) !important;
            }
            .custommenubutton:hover
            {
                background: url(images/printbar.gif) 0 -26px !important;
            }
        </style>

    <telerik:RadWindowManager ID="RadWindowManager2" runat="server">
            <Windows>
                <telerik:RadWindow ID="RadWindow2" runat="server" VisibleOnPageLoad="true" OnClientShow="addMenu"
                    Width="500" Height="500" NavigateUrl="innerwindow.aspx" OnClientCommand="onCommand">
                </telerik:RadWindow>
            </Windows>
        </telerik:RadWindowManager>
        <telerik:RadContextMenu ID="RadContextMenu1" runat="server">
            <Items>
                <telerik:RadMenuItem Text="Trees" />
                <telerik:RadMenuItem Text="Sunset" />
                <telerik:RadMenuItem Text="Mountains" />
            </Items>
        </telerik:RadContextMenu>

         <script type="text/javascript">
            //<![CDATA[
            function showMenu(e)
            {
                //Cancel event!
                if (!e) e = window.event;
                var contextMenu = $find("<%= RadContextMenu1.ClientID %>");
                if ((!e.relatedTarget) || (!$telerik.isDescendantOrSelf(contextMenu.get_element(), e.relatedTarget)))
                {
                    contextMenu.show(e);
                }
                return $telerik.cancelRawEvent(e);
            }
            function addMenu(radWindow)
            {
                var TitleBar = radWindow.GetTitlebar();
                var parent = TitleBar.parentNode;
                var oUL = parent.getElementsByTagName('UL')[0];
                if (!(oUL.firstChild.id == "custommenubuttonID")) // Check if the element is already added
                {
                    // If not - create and add the custom button
                    oUL.style.width = "186px"; //you have set this to 300 but doesnt work for me, buttons seems padded to left.
                    var oLI = document.createElement("LI");
                    oLI.id = "custommenubuttonID"
                    var A = document.createElement("A");
                    oLI.appendChild(A);
                    A.className = "custommenubutton";
                    A.href = "javascript:void(0);";
                    A.title = "Menu";
                    A.onclick = showMenu;
                    A.onmousedown = cancelEventA;
                    A.ondblclick = cancelEventA;
                   // Added span tag. Generated code has span tag for other buttons and menu title in it, dont know why but I decide to add too.
                    var spn = document.createElement("SPAN");
                    spn.innerHTML = "Menu";
                    A.appendChild(spn);
                    oUL.insertBefore(oLI, oUL.firstChild);
                }
            }
            function removeMenu(radWindow) {
                var TitleBar = radWindow.GetTitlebar();
                var parent = TitleBar.parentNode;
                var oUL = parent.getElementsByTagName('UL')[0];
                if (oUL.firstChild.id == "custommenubuttonID") // Check if the element is exists
                {
                    oUL.removeChild(document.getElementById("custommenubuttonID"));
                }
            }
            function cancelEventA(e)
            {
                //Cancel event!
                if (!e) e = window.event;
                return $telerik.cancelRawEvent(e);
            }
            //Here is the solution for problem #3. for minimize command, remove menu button
            //for  maximize and restore commands add it again.
            function onCommand(sender, args) {
                var commandn = args.get_commandName();
                switch (commandn)
                {
                    case "Minimize":
                        removeMenu(sender);
                        break;
                    case "Restore":
                    case "Maximize":
                        addMenu(sender);
                        break;
                }
            }
            //]]>
        </script>

    Now it works perfect. If its ok for you, I can share it in Code Library as Georgi Tunev kindly asked for.

    Regards.



  10. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 22 Jun 2009 Link to this post

    Sure thing Barbaros :)

    Just make sure that in the project that you will upload, you are using a trial version of the controls. Once you upload it, I will check it and publish it right away.


    Kind regards,
    Georgi Tunev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017