Adding TWO custom button on the titlebar

[Emeleen]

Hi!

I don't know if this has been asked yet, but I wanted to add TWO custom buttons in the Radwindow's TitleBar.  I have seen the examples for adding a "Print" custom button in the titlebar, but how about if I wanted a "help" button and a "print" button?

Thanks!

[Princy]

Hello Emeleen,

You can try out the following code to add two buttons in the TitleBar of the window.
aspx:

 <telerik:RadWindow ID="RadWindow1" runat="server" OnClientShow="OnClientShow" VisibleOnPageLoad="true">
 </telerik:RadWindow>

css: (to set the desired images for the buttons)

<style type="text/css">
    .custombutton
    {
     background: url('Print.gif');
    }
    .button
    {
     background: url('Help.gif');
    }

  </style>

jss:

  <script type="text/javascript">
    function OnClientShow(radWindow)
        {

                var TitleBar = radWindow.GetTitlebar();
                var parent = TitleBar.parentNode;
                var oUL = parent.getElementsByTagName('UL');
                oUL[0].style.width = "192px";
                var oLI = oUL[0].getElementsByTagName('LI');
                var newLI = oLI[0].cloneNode(true);
                var newA = newLI.getElementsByTagName('a');
                newA[0].title = "Custom Button";
                newA[0].className = "custombutton";
                newA[0].lastChild.innerHTML = "Custom Button";
                newA[0].onmousedown = callBackFunction;
                oUL[0].insertBefore(newLI, oLI[0]);

                oUL[0].style.width = "222px";
                var newLI = oLI[0].cloneNode(true);
                var newA = newLI.getElementsByTagName('a');
                newA[0].title = "Button";
                newA[0].className = "button";
                newA[0].lastChild.innerHTML = "Button";
                newA[0].onmousedown = callBackFunction1;
                oUL[0].insertBefore(newLI, oLI[0]);
        }

        function callBackFunction()
        {
            alert("The custom button was clicked!");
        }

        function callBackFunction1()
        {
            alert("The button was clicked!");
        }

      </script>

Thanks
Princy.

[Georgi Tunev]

Hi Emeleen,

In addition you can check the following forum thread where a more recent and improved version of the kb's code is available:
http://www.telerik.com/community/forums/thread/b311D-beghck.aspx


Regards,
Georgi Tunev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Emeleen]

Thanks Princy! It's working great!