RadMenu within TitleBar

[Barbaros Saglamtimur]

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.

[Barbaros Saglamtimur]

Ok I figured it out with Menu / Popup Menu

[Georgi Tunev]

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.

[Barbaros Saglamtimur]

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.

[Barbaros Saglamtimur]

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>

[Fiko]

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.

[Barbaros Saglamtimur]

Thanks for your answer, but problem #3 still exists in your solution too.

[Barbaros Saglamtimur]

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.

[Georgi Tunev]

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.