Customizing the radconfirm dialog in UI for ASP.NET AJAX Window

63F75A2C-1F16-4AED-AFE8-B1BBD57646AD

1572 posts

Member since:
Oct 2004

Posted 06 Mar 2007 Link to this post

Requirements
r.a.d.controls version	r.a.d.window 1.x
.NET version	2.0
Visual Studio version	2005
programming language	VB.NET
browser support	all browsers supported by r.a.d.window

PROJECT DESCRIPTION
The radConfirm template can be easily customized by using the <ConfirmTemplate> property of the RadWindowManager.

Attached is a sample page that shows how to insert custom buttons in the radconfirm template and how to get and use the returned value.

It is done the following way:

the customized radConfirm template contains the three buttons;
when closed, the dialog returns a specific value;
the dialog callback function checks the return value;
there are two helper link buttons on the page (they do not have any text so they are not visible);
depending on the dialog return value, the callback function either calls the client-side click mehtods of the Update/Insert link buttons, or does nothing (if result = cancel);

UserExistenceDemoVBN2.zip

4FF2EFBF-C9C9-464C-ABD9-5C03E880F2B9

19 posts

Member since:
Jan 2004

Posted 09 Jul 2007 Link to this post

i'm trying to implement something similar to this but it's not working. i have a hyperlink that gets render on the page with href="#" and

onclick="radconfirm('Are you sure?', confirmCallBackFn, 330, 100,null,'Confirm Delete'); return false;"

my windowmanager looks like this

<radW:RadWindowManager VisibleOnPageLoad="False" visible="true" runat="server" id="Singleton">
    <ConfirmTemplate>
    <style>
     body
     {
      background: white;
      font: normal 11px Arial, Verdana, Sans-serif;
      overflow: hidden;
     }
     .Button
     {
      background: url({2}Img/modalBtnBg.gif) no-repeat;
      border: 0px;
      width: 78px;
      height: 20px;
      color: #333;
      font: normal 11px Arial, Verdana, Sans-serif;
      margin: 2px;
     }
     .FixedDiv
     {
      font: normal 11px Arial, Verdana, Sans-serif;
      margin: 3px;
      color: black;
      text-align: center;
     }
    </style>
    <div class='FixedDiv'>
     <br />
     <img align='absmiddle' style='vertical-align:middle;border:0' src='{2}Img/AlertIcon.gif' />
     {6}
     <embed src="{2}Img/alert.wav" height="0" width="0" style="display: none;"></embed>
    </div>
    <br>
    <center>
     <input class="Button" type="button" id="dialogYes" value="Yes" onclick="javascript:GetRadWindow().ModalDialogCallBack('Yes');"/>
     <input class="Button" type="button" id="dialogNo" value="No" onclick="javascript:GetRadWindow().ModalDialogCallBack('No');"/>
     <input class="Button" type="button" id="dialogCancel" value="Cancel" onclick="javascript:GetRadWindow().ModalDialogCallBack('Cancel');"/>
    </center>
   </ConfirmTemplate>
   </radW:RadWindowManager>

when i click my link, the customized confirm dialog shows up correctly with yes, no, cancel buttons. but i can't get anything to fire for the yes or no buttons. how can i make that happen? i can't use the example here because it's based on a postback that then makes a label visible. i just want the yes/no buttons to fire different client-side functions.

000585EE-7DFC-4C10-B6EB-448F2DA3AFB4

7207 posts

Member since:
Jul 2016

Posted 12 Jul 2007 Link to this post

Hi Michael,

You should use the confirmCallBackFn() function and execute your code based on the returned argument. For convenience I attached to this page a sample that shows this approach.

If this is not what you want, please use the support ticketing system and send us a sample project with detailed description of the observed and the desired behavior. We will check it and do our best to help.

Regards,
Georgi Tunev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

ModifiedRadConfirm.zip

439ACB2E-05DF-4172-B2D7-3D58779F3DB3

66 posts

Member since:
Jul 2004

Posted 08 Jul 2008 Link to this post

Hi, Can I get up to date version of this code? as I am trying to do the same thing but its not working!!

Thanks
Atiq

000585EE-7DFC-4C10-B6EB-448F2DA3AFB4

7207 posts

Member since:
Jul 2016

Posted 08 Jul 2008 Link to this post

Hello Atiq,

The logic is not changed and I am not sure what is not working in your setup. Please open a support ticket and send a small sample project where we can observe what exactly is going on and we will check it right away.

All the best,
Georgi Tunev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

28ED3729-5628-46A8-A95A-15A1C158EF71

1 posts

Member since:
Aug 2008

Posted 11 Aug 2008 Link to this post

Hi,

I have the last release of Telerik Rad Controls. I have downloaded the sample project which name is ModifiedRadConfirm.zip , and it does not work.

I think something is wrong with here.

<input class="Button" type="button" id="dialogYes" value="Yes" onclick="javascript:GetRadWindow().ModalDialogCallBack('Yes');"/>

<input class="Button" type="button" id="dialogNo" value="No" onclick="javascript:GetRadWindow().ModalDialogCallBack('No');"/>

<input class="Button" type="button" id="dialogCancel" value="Cancel" onclick="javascript:GetRadWindow().ModalDialogCallBack('Cancel');"/>

Could you please update the project.
Thanks.
Volkan

000585EE-7DFC-4C10-B6EB-448F2DA3AFB4

7207 posts

Member since:
Jul 2016

Posted 12 Aug 2008 Link to this post

Hi Volkan,

Yes, the code in this code library article is for RadWindow for ASP.NET, while I assume that you are using RadWindow for ASP.NET AJAX.
In RadWindow for ASP.NET AJAX, the confirmation template is different and you can examine it when you put a RadWindowManager on a page and check the rendered HTML. For convenience I am pasting it below:

    
            <div class="windowpopup radconfirm">             
        
                <div class="dialogtext"> 
        
                {1}              
        
                </div>                       
        
                <div> 
        
                    <a onclick="$find('{0}').callBack(true);"  class="radwindowbutton" href="javascript:void(0);" ><span class="outerspan"><span class="innerspan">##LOC[OK]##</span></span></a> 
        
                    <a onclick="$find('{0}').callBack(false);" class="radwindowbutton"  href="javascript:void(0);"><span class="outerspan"><span class="innerspan">##LOC[Cancel]##</span></span></a> 
        
                </div> 
        
            </div>

Kind regards,
Georgi Tunev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

3C86ED0A-920A-4F4B-8369-68D7E60D8957

17 posts

Member since:
Feb 2009

Posted 09 Feb 2009 Link to this post

Hi,

I am attempting to follow the instructions for customizing my radconfirm popup. I am using this in an aspx page that uses a master page which already has a radwindowmanager. I cannot change the master page because it is used by many of our pages and I have a unique situation for my one page. So I tried adding a radwindowmanager to my page thinking the page would use it instead of the one in the master page but this doesn't appear to be the case.

Any suggestions?

Thanks.

John

000585EE-7DFC-4C10-B6EB-448F2DA3AFB4

7207 posts

Member since:
Jul 2016

Posted 10 Feb 2009 Link to this post

Hi John,

All RadWindowManager's functions - radopen, radconfirm, radprompt and radalert use the RadWindowManager that has been rendered first on the page. In scenario like yours, I would suggest not to use radconfirm() but a RadWindow that would open a content page with the look and functionality of the radconfirm dialog, e.g. instead of Callback Function, you would use the OnClientClose eventhandler of that RadWindow.
More information on how to use RadWindow as a dialog is available in the documentation and in our online demo.

Sincerely yours,
Georgi Tunev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

3C86ED0A-920A-4F4B-8369-68D7E60D8957

17 posts

Member since:
Feb 2009

Posted 10 Feb 2009 Link to this post

Hi,

Thanks for the reply. I spoke with the lead developer and we think that due to state maintenance on the page we want to stick with using the radconfirm and call it from the JavaScript. So I am building up a custom template object and assigning it to the ConfirmTemplate property of the RadWindowManager. This is working fine so far. I have a popup that is set to the width and height I set in my object and it has two custom buttons on it. The issue I'm trying to figure out is how do I get the message I pass into the radconfirm call in my JavaScript to show up still? I mean when I use a custom ConfirmTemplate does that basically mean I have to redo everything including the display of the message?

Here is my JavaScript. In this JavaScript the message is populated in the code behind page on the OnClientClick event of a button on my page. It pulls the text for the message from a resource file. Also my custom confirm template. If I have to get at the message being passed in to the call to radConfirm how do I do that?

    
            <script language="javascript">  
        
                    Sys.Application.add_load(applicationLoadHandler);  
        
                    dirty = false;  
        
                    function applicationLoadHandler() {  
        
                        searchIndexTextBox = $find('<%=SearchIndexTextBox.ClientID %>');  
        
                        saveButton = $get('<%=Master.Toolbar.SaveButton.ClientID %>');  
        
                        applyButton = $get('<%=Master.Toolbar.ApplyButton.ClientID %>');  
        
                        rebuildHidden = $get('<%=rebuild.ClientID %>');  
        
                        buttonClicked = '';  
        
                        initialRebuildIndexPathValue = searchIndexTextBox.get_textBoxValue();  
        
                    }  
        
                    function popUp(message, title, caller) {  
        
                        buttonClicked = caller;  
        
                        if (dirty == false && initialRebuildIndexPathValue != searchIndexTextBox.get_textBoxValue()) {  
        
                            radconfirm(message, setAnswer, 510, 140, title);  
        
                        }  
        
                        else {  
        
                            if (buttonClicked == applyButton.id) {  
        
                                applyButton.OnClick = __doPostBack(applyButton.id.replace('_', '$'), '');  
        
                                applyButton.OnClientClick = '';  
        
                            }  
        
                            else {  
        
                                saveButton.OnClick = __doPostBack(saveButton.id.replace('_', '$'), '');  
        
                                saveButton.OnClientClick = '';  
        
                            }  
        
                        }     
        
                    }  
        
                    function setAnswer(arg) {  
        
                        if (arg == null) {  
        
                            arg = false;  
        
                        }  
        
                        $sv(rebuildHidden.id, arg);  
        
                        dirty = true;  
        
                        if (buttonClicked == applyButton.id) {  
        
                            applyButton.OnClick = __doPostBack(applyButton.id.replace('_', '$'), '');  
        
                            applyButton.OnClientClick = '';  
        
                        }  
        
                        else {  
        
                            saveButton.OnClick = __doPostBack(saveButton.id.replace('_', '$'), '');  
        
                            saveButton.OnClientClick = '';  
        
                        }  
        
                    }  
        
                </script>

    
            public class RadConfirmTemplate : Panel ,  ITemplate  
        
                { 
        
                    #region ITemplate Members  
        
                    private IResourceService m_resourceService;  
        
                    public void InstantiateIn(System.Web.UI.Control container)  
        
                    {  
        
                        test();  
        
                        Width = RadConfirmWidth;  
        
                        Height = RadConfirmHeight;  
        
                        container.Controls.Add(this);  
        
                    } 
        
                    #endregion  
        
                    protected IResourceService ResourceService  
        
                    {  
        
                        get 
        
                        {  
        
                            if (m_resourceService == null)  
        
                            {  
        
                                m_resourceService = ServiceFactory.GetResourceService();  
        
                            }  
        
                            return m_resourceService;  
        
                        }  
        
                    }  
        
                    public int RadConfirmWidth { get; set; }  
        
                    public int RadConfirmHeight { get; set; }  
        
                    public RadConfirmTemplate(int width, int height)  
        
                    {  
        
                        RadConfirmWidth = width;  
        
                        RadConfirmHeight = height;  
        
                    }  
        
                    public void test()  
        
                    {  
        
                        HtmlGenericControl mainContainer = new HtmlGenericControl("div");  
        
                        mainContainer.ID = "RadConfirm_mainContainer";  
        
                        HtmlGenericControl bodyRowContainer = new HtmlGenericControl("div");  
        
                        bodyRowContainer.ID = "RadConfirm_bodyRowContainer";  
        
                        HtmlGenericControl buttonRowContainer = new HtmlGenericControl("div");  
        
                        buttonRowContainer.ID = "RadConfirm_buttonRowContainer";  
        
                        HtmlGenericControl buttonContainer = new HtmlGenericControl("div");  
        
                        buttonContainer.ID = "RadConfirm_btnContainer";  
        
                        Button continueButton = new Button();  
        
                        continueButton.Text = ResourceService.GetString(ResourceStringNames.ButtonNames.CONTINUE);  
        
                        continueButton.ImageUrl = ResourceService.GetButtonImageUrl(SessionContextManager.CurrentSessionContext, ResourceStringNames.ButtonNames.CONTINUE);  
        
                        continueButton.ID = "radConfirmContinueButton";  
        
                        continueButton.Width = 75;  
        
                        continueButton.Height = 20;  
        
                        //continueButton.CssClass = "RadConfirmTemplateButton";  
        
                        //Controls.Add(continueButton);  
        
                        Button cancelButton = new Button();  
        
                        cancelButton.Text = ResourceService.GetString(ResourceStringNames.ButtonNames.CANCEL);  
        
                        cancelButton.ImageUrl = ResourceService.GetButtonImageUrl(SessionContextManager.CurrentSessionContext, ResourceStringNames.ButtonNames.CANCEL);  
        
                        cancelButton.ID = "radConfirmCancelButton";  
        
                        cancelButton.Width = 75;  
        
                        cancelButton.Height = 20;  
        
                        //cancelButton.CssClass = "RadConfirmTemplateButton";  
        
                        //Controls.Add(cancelButton);  
        
                        buttonContainer.Controls.Add(continueButton);  
        
                        buttonContainer.Controls.Add(cancelButton);  
        
                        buttonRowContainer.Controls.Add(buttonContainer);  
        
                        mainContainer.Controls.Add(bodyRowContainer);  
        
                        mainContainer.Controls.Add(buttonRowContainer);  
        
                        Controls.Add(mainContainer);  
        
                    }  
        
                }

3C86ED0A-920A-4F4B-8369-68D7E60D8957

17 posts

Member since:
Feb 2009

Posted 10 Feb 2009 Link to this post

Sorry when I replied to you the first time I didn't know how to use the format code block functionality so my first reply was very difficult to read the code. I edited that post with code blocks using the "Format Code Block" functionality.

000585EE-7DFC-4C10-B6EB-448F2DA3AFB4

7207 posts

Member since:
Jul 2016

Posted 13 Feb 2009 Link to this post

Hi John,

I am not quite sure if I understand your scenario completely. Could you please open a new support ticket and send me a small sample project where I can observe the current problem? I will check it and get back to you right away.

Regards,
Georgi Tunev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

042FEC9C-9CB4-4F41-B0C7-35782D8BC319

8 posts

Member since:
May 2010

Posted 27 May 2010 Link to this post

I would like to use several confirmation dialogs and I would like to use custom template per each dialog, i.e. I would get several templates for single web page.

How to do this? So far, it seems template for confirmation dialog is singleton, global entity for all dialogs.

Thank you in advance for clarification.

93662917-1E03-49EC-9286-033C9D1BF79E

1406 posts

Member since:
May 2014

Posted 02 Jun 2010 Link to this post

Hi Maciej,

By design, the first RadWindowManager which is rendered on the page is used by the global methods like radopen, radalert, GetRadWindowManager, etc. In order to cover your scenario, you need to upgrade to recent version of RadControls for ASP.NET AJAX. Using the recent version of the RadWindowManager control you can find the RadWindowManager and call its oManger.radconfirm() method explicitly:

<asp:Button ID="Button1" runat="server" OnClientClick="opneRadAlert1(); return false;"

Text="Open radalert1" />

<asp:Button ID="Button2" runat="server" OnClientClick="opneRadAlert2(); return false;"

Text="Open radalert2" />

<telerik:RadWindowManager ID="RadWindowManager1" Skin="Black" runat="server">

<AlertTemplate>

<%--template 1--%>

</AlertTemplate>

</telerik:RadWindowManager>

<telerik:RadWindowManager ID="RadWindowManager2" Skin="Vista" runat="server">

<AlertTemplate>

<%--template 2--%>

</AlertTemplate>

</telerik:RadWindowManager>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

function callback(arg)

{

alert(arg);

}

function opneRadAlert1()

{

var oWindowManager1 = $find("<%= RadWindowManager1.ClientID %>");

oWindowManager1.radconfirm("radalert 2", callback, 300, 200, "Title");

}

function opneRadAlert2()

{

var oWindowManager2 = $find("<%= RadWindowManager2.ClientID %>");

oWindowManager2.radconfirm("radalert 2", callback, 200, 200, "Title");

}

</script>

</telerik:RadCodeBlock>

Please note that this solution will not work with RadWIndowManager for ASP.NET.

I hope this helps.

Greetings,
Fiko
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

042FEC9C-9CB4-4F41-B0C7-35782D8BC319

8 posts

Member since:
May 2010

Posted 02 Jun 2010 Link to this post

Fiko, thank you very much! It is very elegant, but indeed I have to upgrade because my version allows only one manager per page.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Customizing the radconfirm dialog

63F75A2C-1F16-4AED-AFE8-B1BBD57646AD

4FF2EFBF-C9C9-464C-ABD9-5C03E880F2B9

000585EE-7DFC-4C10-B6EB-448F2DA3AFB4

439ACB2E-05DF-4172-B2D7-3D58779F3DB3

000585EE-7DFC-4C10-B6EB-448F2DA3AFB4

28ED3729-5628-46A8-A95A-15A1C158EF71

000585EE-7DFC-4C10-B6EB-448F2DA3AFB4

3C86ED0A-920A-4F4B-8369-68D7E60D8957

000585EE-7DFC-4C10-B6EB-448F2DA3AFB4

3C86ED0A-920A-4F4B-8369-68D7E60D8957

3C86ED0A-920A-4F4B-8369-68D7E60D8957

000585EE-7DFC-4C10-B6EB-448F2DA3AFB4

042FEC9C-9CB4-4F41-B0C7-35782D8BC319

93662917-1E03-49EC-9286-033C9D1BF79E

042FEC9C-9CB4-4F41-B0C7-35782D8BC319