RadWindow for ASP.NET AJAX

The look of the predefined dialogs that appear when you call radalert, radconfirm, or radprompt is controlled by templates that correspond to each dialog. To get the current code for these templates, you need to put a RadWindowManager on your page, run it in your browser and examine the HTML dump.

Note
Important: Because of the changes that were made in RadControls' skins in Q1 2009, the templates are using different classes. Below you can see the templates for RadWindowManager pre-Q1 2009 and RadWindowManager Qx 2009. They are declared in RadWindowManager's Templates collection for convenience.

The parameters provided to the template are the following:

• {0} - RadWindow's popup client ID

• {1} - Text to show

• {2} - Default text (for the prompt template)

CopyASPX for Q1 2009 and later versions

<telerik:RadWindowManager ID="RadWindowManager2" runat="server">
    <AlertTemplate>
        <div class="rwDialogPopup radalert">
            <div class="rwDialogText">
                {1}
            </div>
            <div>
                <a onclick="$find('{0}').close();" class="rwPopupButton" href="javascript:void(0);">
                    <span class="rwOuterSpan"><span class="rwInnerSpan">##LOC[OK]##</span> </span>
                </a>
            </div>
        </div>
    </AlertTemplate>
    <PromptTemplate>
        <div class="rwDialogPopup radprompt">
            <div class="rwDialogText">
                {1}
            </div>
            <div>
                <script type="text/javascript">
                    function RadWindowprompt_detectenter(id, ev, input)
                    {
                        if (!ev) ev = window.event;
                        if (ev.keyCode == 13)
                        {
                            var but = input.parentNode.parentNode.getElementsByTagName("A")[0];
                            if (but)
                            {
                                if (but.click) but.click();
                                else if (but.onclick)
                                {
                                    but.focus(); var click = but.onclick; but.onclick = null; if (click) click.call(but);
                                }
                            }
                            return false;
                        }
                        else return true;
                    }  
                </script>
                <input onkeydown="return RadWindowprompt_detectenter('{0}', event, this);" type="text"
                    class="rwDialogInput" value="{2}" />
            </div>
            <div>
                <a onclick="$find('{0}').close(this.parentNode.parentNode.getElementsByTagName('input')[0].value);"
                    class="rwPopupButton" href="javascript:void(0);"><span class="rwOuterSpan"><span
                        class="rwInnerSpan">##LOC[OK]##</span></span></a> <a onclick="$find('{0}').close(null);"
                            class="rwPopupButton" href="javascript:void(0);"><span class="rwOuterSpan"><span
                                class="rwInnerSpan">##LOC[Cancel]##</span></span></a>
            </div>
        </div>
    </PromptTemplate>
    <ConfirmTemplate>
        <div class="rwDialogPopup radconfirm">
            <div class="rwDialogText">
                {1}
            </div>
            <div>
                <a onclick="$find('{0}').close(true);" class="rwPopupButton" href="javascript:void(0);">
                    <span class="rwOuterSpan"><span class="rwInnerSpan">##LOC[OK]##</span></span></a>
                <a onclick="$find('{0}').close(false);" class="rwPopupButton" href="javascript:void(0);">
                    <span class="rwOuterSpan"><span class="rwInnerSpan">##LOC[Cancel]##</span></span></a>
            </div>
        </div>
    </ConfirmTemplate>
</telerik:RadWindowManager>

CopyASPX for versions prior to Q1 2009

<telerik:RadWindowManager ID="RadWindowManager3" runat="server">
    <AlertTemplate>
        <div class="windowpopup radalert">
            <div class="dialogtext">
                {1}
            </div>
            <div>
                <a onclick="$find('{0}').close();" class="radwindowbutton" href="javascript:void(0);">
                    <span class="outerspan"><span class="innerspan">##LOC[OK]##</span> </span></a>
            </div>
        </div>
    </AlertTemplate>
    <PromptTemplate>
        <div class="windowpopup radprompt">
            <div class="dialogtext">
                {1}
            </div>
            <div>
                <script type="text/javascript">
                    function radwindowprompt_detectenter(id, ev, input)
                    {
                        if (!ev) ev = window.event;
                        if (ev.keyCode == 13)
                        {
                            var but = input.parentNode.parentNode.getElementsByTagName("A")[0];
                            if (but)
                            {
                                if (but.click) but.click();
                                else if (but.onclick)
                                {
                                    but.focus(); var click = but.onclick; but.onclick = null; if (click) click.call(but);
                                }
                            }
                            return false;
                        }
                        else return true;
                    }  
                </script>
                <input onkeydown="return radwindowprompt_detectenter('{0}', event, this);" type="text"
                    class="dialoginput" value="{2}" />
            </div>
            <div>
                <a onclick="$find('{0}').close(this.parentNode.parentNode.getElementsByTagName('input')[0].value);"
                    class="radwindowbutton" href="javascript:void(0);"><span class="outerspan"><span
                        class="innerspan">##LOC[OK]##</span></span></a> <a onclick="$find('{0}').close(null);"
                            class="radwindowbutton" href="javascript:void(0);"><span class="outerspan"><span
                                class="innerspan">##LOC[Cancel]##</span></span></a>
            </div>
        </div>
    </PromptTemplate>
    <ConfirmTemplate>
        <div class="windowpopup radconfirm">
            <div class="dialogtext">
                {1}
            </div>
            <div>
                <a onclick="$find('{0}').close(true);" class="radwindowbutton" href="javascript:void(0);">
                    <span class="outerspan"><span class="innerspan">##LOC[OK]##</span></span></a>
                <a onclick="$find('{0}').close(false);" class="radwindowbutton" href="javascript:void(0);">
                    <span class="outerspan"><span class="innerspan">##LOC[Cancel]##</span></span></a>
            </div>
        </div>
    </ConfirmTemplate>
</telerik:RadWindowManager>

You can change the look of the alert, confirm, and prompt dialogs in your application by changing these templates. There are two ways to change the template that the RadWindowManager in your application uses:

1. The first method is to supply a new template declaratively:

   1. Go to the Source view of your HTML page and locate the tag that defines your RadWindowManager.

   2. Inside the RadWindowManager tag, just before the window definitions, type the start of a new tag ("<").

   3. A window pops up letting you choose the template you want to enter:

       

      
      Note that you can enter a template for RadWindow objects that the manager creates as well as for the alert, confirm, and prompt templates.

   4. Add your new template to the RadWindowManager. For example:

      CopyASPX

      <telerik:RadWindowManager ID="RadWindowManager1" runat="server">
          <AlertTemplate>
              <div class="rwDialogPopup radalert">
                  <div class="rwDialogText">
                      {1}
                  </div>
                  <div>
                      <a onclick="$find('{0}').close();" class="rwPopupButton" href="javascript:void(0);">
                          <span class="rwOuterSpan"><span class="rwInnerSpan">##LOC[OK]##</span> </span>
                      </a>
                  </div>
              </div>
          </AlertTemplate>
      </telerik:RadWindowManager>

2. The second way to change the template that the RadWindowManager in your application uses is to create a Web User Control for the template and assign that template in code. The RadWindowManager object has three properties, AlertTemplate, ConfirmTemplate, and PromptTemplate, to which you can assign the new template.

   1. In the Project Explorer, right click on the project and select Add New Item...

   2. Select Web User Control, and give the new template the name "AlertTemplate.ascx".

   3. In the AlertTemplate.ascx file, design your new template. For example

      CopyASPX

      <%@  control language="C#" classname="AlertTemplate" %>
      <div class="rwDialogPopup radalert">
          <div class="rwDialogText">
              {1}
          </div>
          <div>
              <a onclick="$find('{0}').close();" class="rwPopupButton" href="javascript:void(0);">
                  <span class="rwOuterSpan"><span class="rwInnerSpan">##LOC[OK]##</span> </span>
              </a>
          </div>
      </div>

   4. Each of the Template properties is an ITemplate type. Implement an ITemplate class to load the new Web User Control that you defined. This class gains a reference to the web page in its constructor. The implementation of the one ITemplate method, InstantiateIn(), then loads the Web User Control onto that page and adds it to the supplied owner:

      • C#
      • VB.NET

      CopyC#

      class AlertTemplate : ITemplate
      {
          private Page _page;
          public AlertTemplate(Page page)
          {
              this._page = page;
          }
          void ITemplate.InstantiateIn(Control owner)
          {
              Control ctrl = _page.LoadControl("AlertTemplate.ascx");
              owner.Controls.Add(ctrl);
          }
      }

      CopyVB.NET

      
          Class AlertTemplate
              Implements ITemplate
              Private _page As Page
              Public Sub New(ByVal page As Page)
                  Me._page = page
              End Sub
              Sub InstantiateIn(ByVal owner As Control) Implements ITemplate.InstantiateIn
                  Dim ctrl As Control = _page.LoadControl("AlertTemplate.ascx")
                  owner.Controls.Add(ctrl)
              End Sub
          End Class

   5. In the Page_Load event handler of the page that contains your RadWindowManager, create an instance of your new ITemplate class and assign the instance as the value of the appropriate template property:

      • C#
      • VB.NET

      CopyC#

      protected void Page_Load(object sender, EventArgs e)
      {
          this.RadWindowManager1.AlertTemplate = new AlertTemplate(this.Page);
      }

      CopyVB.NET

      Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
          Me.RadWindowManager1.AlertTemplate = New AlertTemplate(Me.Page)
      End Sub