Add Button to RadWindow Title Bar

5 posts, 3 answers
  1. Robert
    Robert  avatar
    68 posts
    Member since:
    Feb 2009

    Posted 16 Mar 2012 Link to this post

    I'm working with the Telerik RadWindow, and I am writing to ask how best to add a button to the RadWindow Title Bar;

    Best regards - Rob
  2. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 19 Mar 2012 Link to this post

    Hello Robert,

    Try the following javascript on hooking OnClientShow event of the RadWindow.

    JS:
    <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"))
     {
       oUL.style.width = "192px";
       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";
       oUL.insertBefore(oLI, oUL.firstChild);
       radWindow._updateTitleWidth();
     }
    }

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Robert
    Robert  avatar
    68 posts
    Member since:
    Feb 2009

    Posted 19 Mar 2012 Link to this post

    Thank you for the response, and the code to place the button on the Title Bar works great;

    An additional question -

    Is it possible to place a customized button, which reads "Return to Menu" as an example;

    I am hoping to utilize this button to close the RadWindow - I already have the necessary JavaScript;

    Thanks in advance for any insight;
  5. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 20 Mar 2012 Link to this post

    Hello Robert,

    Try the following JavaScript to close the RadWindow on Clicking the Button.
    JS:
    <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"))
        {
         oUL.style.width = "192px";
         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 = "Close";
         A.onmousedown = closewindow;
         oUL.insertBefore(oLI, oUL.firstChild);
         radWindow._updateTitleWidth();
        }
      }
     function closewindow(e)
      {
       var oManager = GetRadWindowManager();
       var oWnd = oManager.GetWindowByName("RadWindow1");
       oWnd.Close();
       return $telerik.cancelRawEvent(e);
      }
    </script>

    Thanks,
    Princy.
  6. Answer
    rdmptn
    rdmptn avatar
    72 posts
    Member since:
    Aug 2011

    Posted 20 Mar 2012 Link to this post

    I believe you'd rather want to change the title property of the custom button to the desired string in the above snippet. Or you could just use the built-in Close button (with the [x]) and change its tooltip to the desired string via the localization options the RadWindow provides (http://www.telerik.com/help/aspnet-ajax/radwindow-localization.html).
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017