Custom radprompt for RadWindow for ASP.NET and RadWindow for ASP.NET AJAX

RELATED TO:

Article information

Article relates to

 RadWindow for ASP.NET & ASP.NET AJAX

Created by

 Georgi Tunev

Last modified

 27/07/2008

Last modified by

 Svetlina, Telerik

The following KB article will show how to provide a custom radprompt dialog for your application by using RadWindow for ASP.NET (v1.x) or RadWindow for ASP.NET AJAX (currently RadWindow "Prometheus"). Due to the different architecture of the two versions, the implementation of the custom dialog is different.


RadWindow for ASP.NET
In RadWindow for ASP.NET, the radconfirm, radprompt and radalert dialogs' look and functionality is set in a CoreTemplates.xml file which resides in your skin's folder. 

If you examine the CoreTemplates.xml file, you will notice that there are several parameters, surrounded by curtly brackets, which are used in the templates:
{0} - radWindow client ID
{1} - radWindowobject reference (allows to call radWindow methods such as Close, Restore, etc)
{2} - Path to current skin folder (allows to access images, other resources)
{6} – Text to show (in the alert, confirm, prompt);  

You can either change the corresponding template in that file, which will affect all dialogs in your application, or alternatively - you can set the custom template in the RadWindowManager's declaration directly in your aspx page. The sample code below shows the second approach - this gives you the opportunity to provide different custom templates for different pages in your application:

<form id="form1" runat="server">  
 
<script type="text/javascript">  
function openPrompt()  
{  
    radprompt("Please select an option", CallBackFn);  
}  
 
function CallBackFn(arg)  
{  
    alert(arg);  
}  
</script> 
 
<radW:RadWindowManager ID="RadWindowManager1" runat="server">  
    <PromptTemplate> 
 
        <script type="text/javascript">  
        function closePrompt()  
        {                  
            var select = document.getElementById('select');  
            var selectedValue = select.options[select.selectedIndex].value;  
            GetRadWindow().ModalDialogCallBack(selectedValue);  
        }  
        </script> 
 
        <style type="text/css">   
            body   
            {   
                background: white;   
                font: normal 11px Verdana, Arial, Sans-serif;  
                overflow: hidden;   
            }   
            .Button   
            {   
                background: url({2}Img/modalBtnBg.gif) no-repeat; border: 0px; width: 78px; height: 20px; color: #333; font: normal 11px Verdana,Arial, Sans-serif; margin: 2px;   
            }   
            .FixedDiv   
            {   
                font: normal 11px Verdana, Arial,Sans-serif;   
                margin: 3px;   
                color: black;   
                text-align: center;   
            }   
        </style> 
        <div class='FixedDiv'>  
            <center> 
                {6}  
                <br /> 
                <img align='absmiddle' style='vertical-align: middle; border: 0' src='{2}Img/AlertIcon.gif' /> 
                <select id="select">  
                    <option value="One">One</option> 
                    <option value="Two">Two</option> 
                    <option value="Three">Three</option> 
                    <option value="Four">Four</option> 
                </select> 
            </center> 
            <br /> 
            <center> 
                <button class="Button" onclick="closePrompt()">  
 
                    <script> 
                document.write(GetRadWindow().GetLocalizedString("Ok"));  
                    </script> 
 
                </button> 
                <button class="Button" onclick="GetRadWindow().Close()">  
 
                    <script> 
                document.write(GetRadWindow().GetLocalizedString("Cancel"));  
                    </script> 
 
                </button> 
                <br /> 
                <br /> 
            </center> 
        </div> 
    </PromptTemplate> 
</radW:RadWindowManager> 
<button onclick="openPrompt(); return false;">  
    Open custom radprompt</button> 
</form> 


Note the closePrompt() function which shows how to return the selected value to the callback function of the dialog. If you have more than one item in the template, for example - a dropdown and a checkbox, after getting their values, you need to add them to a new object and send that object as an argument to the callback function.


RadWindow for ASP.NET AJAX

Due to the different architecture in RadWindow for ASP.NET AJAX, you need to change the logic when creating the custom dialog. The main differences are:
  1. The templates are now embedded in the Telerik.Web.UI.dll file. To see what the corresponding template looks like, you can simply put a RadWindowManager in your aspx, run the page and examine the HTML dump. The templates are rendered in the RadWindowManager's structure in DIV containers with ID which consist the RadWindowManager's ID and the name of the template, e.g:
    <DIV id="RadWindowManager1_confirmtemplate" style="display:none;">
  2. The template is now not displayed in an IFRAME, but in the context of the same page. Because the template is cloned for every called dialog, you must get the unique ID of the additional elements that you have in the template in order to use them in the Javascript function.
    What we recommend is to add the client ID of the dialog to the ID of the additional elements - this will allow you to get a reference to the correct HTML control. This approach is used in the code below
  3. There are only a couple of parameters that are used:
    1. {0} - radWindow client ID
    2. {1} - Text to show (in the alert, confirm, prompt);

Below you can see the same structure of the radprompt dialog used in the RadWindow for ASP.NET example with the necessary changes made so it works in RadWindow for ASP.NET AJAX:

 <form id="form1" runat="server">  
        <asp:ScriptManager ID="scriptmanager1" runat="server">  
        </asp:ScriptManager> 
 
        <script type="text/javascript">     
        function openPrompt()     
        {     
            radprompt('Please select an option',callbackFn);     
        }     
             
        function callbackFn(arg)     
        {     
            if (null != arg) alert("Argument returned " + arg);  
            else alert ("No argument was returned");     
        }     
        </script> 
 
        <telerik:RadWindowManager ID="RadWindowManager1" runat="server">  
            <PromptTemplate> 
 
                <script type="text/javascript">     
            function closePrompt(winid)     
            {           
                var select = document.getElementById('select' + winid);     
                var selectselectedValue = select.options[select.selectedIndex].value;     
    
                var confirmWnd = $find(winid);     
                confirmWnd.close(selectedValue);                 
            }     
                </script> 
 
                <div class="windowpopup radprompt">  
                    <div class="dialogtext">  
                        {1}  
                    </div> 
                    <div> 
                        <select id="select{0}">  
                            <option value="One">One</option> 
                            <option value="Two">Two</option> 
                            <option value="Three">Three</option> 
                            <option value="Four">Four</option> 
                        </select> 
                    </div> 
                    <div> 
                        <a onclick="closePrompt('{0}');" class="radwindowbutton" href="javascript:void(0);">  
                            <span class="outerspan"><span class="innerspan">##LOC[OK]##</span></span></a> 
                        <a onclick="$find('{0}').close();" class="radwindowbutton" href="javascript:void(0);">  
                            <span class="outerspan"><span class="innerspan">##LOC[Cancel]##</span></span></a> 
                    </div> 
                </div> 
                </DIV> 
            </PromptTemplate> 
        </telerik:RadWindowManager> 
        <button onclick="openPrompt(); return false;">  
            test</button> 
    </form> 

More Resources

  • Forums

    Find answers to thousands of questions or reach out to our active community.

  • Demos

    Browse 1,200+ demos with source code covering basic and advanced scenarios.

  • Sample Applications

    Learn how to integrate the controls in real-world examples.

  • Feedback Portal

    Vote and follow the features you want to see added to Telerik UI for ASP.NET AJAX.

  • User Voice

    Get answers directly from the people who build the product.

  • Documentation

    Benefit from detailed help articles and API references for all controls.

  • Knowledge Base

    Learn how to achieve common scenarios from a multitude of tutorials and working examples.

  • Code Library

    Browse sample projects submitted by Telerik staff and community members.

  • Blog

    Stay up-to-date with the latest functionality, how-to articles and industry trends.

  • Release History

    Up-to-date release notes for all new features and improvements.