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

Adding TWO custom button on the titlebar

3 Answers 85 Views
Window
This is a migrated thread and some comments may be shown as answers.
Emeleen
Top achievements
Rank 1
Emeleen asked on 29 Sep 2008, 03:37 PM
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!

3 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 30 Sep 2008, 10:47 AM
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.


0
Georgi Tunev
Telerik team
answered on 30 Sep 2008, 10:51 AM
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.
0
Emeleen
Top achievements
Rank 1
answered on 30 Sep 2008, 04:58 PM
Thanks Princy! It's working great!
Tags
Window
Asked by
Emeleen
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Georgi Tunev
Telerik team
Emeleen
Top achievements
Rank 1
Share this question
or