Home / Community & Support / Knowledge Base / RadControls for ASP.NET and ASP.NET AJAX / Window / Custom radprompt for RadWindow for ASP.NET and RadWindow for ASP.NET AJAX

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

Article Info

Rating: 2

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> 

Comments

  • Mike , Sep 12, 2008

    Great Example. Just what I was looking for. There is a slight syntax error in the ajax example: var selectselectedValue = select.options[select.selectedIndex].value; shoud be var selectedValue = select.options[select.selectedIndex].value;

  • Telerik Admin , Oct 17, 2008

    Hi Mike,
    Thank you for the nice words - we really appreciate it. I fixed the typo and updated your points.

If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.