Templates for Confirm Dialog

[Emmet]

I am using the confirm dialog in my web application. However for a particular situation I would like to present the user with a yes/no/cancel choice. Is it possible to do this using the templates for the dialogs?

If not whats the best way to go about it?

Thanks

Emmet

[Georgi Tunev]

Hi Emmet,

You will need to provide a custom template for the radconfirm dialog where you can add the third button. I believe the following KB article will be of help: (ID#912) Custom radprompt for RadWindow for ASP.NET and RadWindow for ASP.NET AJAX. The KB is about radprompt, however the logic with the confirmation dialog is the same.




Regards,
Georgi Tunev
the Telerik team

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

[Emmet]

I have tried this but it doesn't seem to be working 



the WindowManager looks like this:









<telerik:RadWindowManager ID="windowManager" runat="server" Skin="Vista" Behaviors="Close, Move" Height = "700px" Width="900px">


<

ConfirmTemplate>

    <div class="windowpopup radconfirm">    

        <div class="dialogtext">

        {1} 

        </div>

    <div>

    <p>emmets confirm...</p>

    <a onclick="$find('{0}').callBack(true);" class="radwindowbutton" href="javascript:void(0);" ><span class="outerspan"><span class="innerspan">Yes</span></span></a>

    <a onclick="$find('{0}').callBack(false);" class="radwindowbutton" href="javascript:void(0);"><span class="outerspan"><span class="innerspan">No</span></span></a>

</div>

</div>

</ConfirmTemplate>

<Windows>

<telerik:RadWindow ID="RadWindow1" Skin="Vista" VisibleOnPageLoad = "false" Height="517px" Width="650px" VisibleStatusBar="false" Title="Emex" runat="server" DestroyOnClose="true"></telerik:RadWindow>

</Windows>

</telerik:RadWindowManager>

Basically the standard confirm but with yes and no buttons and some text 'emmets text...' to make sure the right dialog is coming up. Its called by using the following javascript function.

function

showDeleteRiskConfirm()
{ 
    radconfirm('Are you sure you want to Delete this Risk?', confirmDeleteRiskCallBackFn, 330, 100, null, "Delete Risk");
}

function

confirmDeleteRiskCallBackFn(arg)
{
    if(arg) 
    { 
        __doPostBack('<%=         this.RiskButtons1.DeleteButton.UniqueID %>',''); 
    }
}

But it always displays the generic confirm dialog with the OK/Cancel buttons. Could you post a code example of a modified confirm dialog?

Thanks

Emmet

[Georgi Tunev]

Hi Emmet,

Please check the attached code. Note that the argument is returned as a string and not as a boolean:

<form id="form1" runat="server">

    <script type="text/javascript">
    function showDeleteRiskConfirm()
    {
        radconfirm('Are you sure you want to Delete this Risk?', confirmDeleteRiskCallBackFn, 330, 100, null, "Delete Risk");
    }

    function confirmDeleteRiskCallBackFn(arg)
    {
     if(arg == "true") alert("You selected Yes");
     if(arg == "false") alert("You selected No");
     if(arg == "cancel") alert("You selected Cancel");

    }
    </script>

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <telerik:RadWindowManager ID="windowManager" runat="server" Skin="Vista" Behaviors="Close,
    Move" Height="700px" Width="900px">
        <ConfirmTemplate>
            <div class="windowpopup radconfirm">
                <div class="dialogtext">
                    {1}
                </div>
                <div>
                    <p>
                        emmets confirm...</p>
                    <a onclick="$find('{0}').callBack('true');" class="radwindowbutton" href="javascript:void(0);">
                        <span class="outerspan"><span class="innerspan">Yes</span></span></a>

                        <a onclick="$find('{0}').callBack('false');"
                            class="radwindowbutton" href="javascript:void(0);"><span class="outerspan"><span
                                class="innerspan">No</span></span></a>

                            <a onclick="$find('{0}').callBack('cancel');"
                            class="radwindowbutton" href="javascript:void(0);"><span class="outerspan"><span
                                class="innerspan">Cancel</span></span></a>
                </div>
            </div>
        </ConfirmTemplate>
        <Windows>
            <telerik:RadWindow ID="RadWindow1" Skin="Vista" VisibleOnPageLoad="false" Height="517px"
                Width="650px" VisibleStatusbar="false" Title="Emex" runat="server" DestroyOnClose="true">
            </telerik:RadWindow>
        </Windows>
    </telerik:RadWindowManager>
    <button onclick="showDeleteRiskConfirm(); return false;">
        test</button>
</form>

Best wishes,
Georgi Tunev
the Telerik team

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

[Emmet]

Great thanks, that works.

A further point though. On my page I wanted some confirm dialogs with yes/no and some with yes/no/cancel. I found I could do this by overriding the Confirm Template to do the yes/no and overriding the Prompt Template to do the yes/no/cancel. Just make the first div in the prompt template class="windowpopup radconfirm" like so:

<PromptTemplate>
    <div class="windowpopup radconfirm">
    ...

Thanks again

Emmet

[Jim]

Hello,

I too had the need you described. 
Ideally, telerik's control should allow the developer to define additional templates so that a collection of confirm templates exist, so that the developer can access them by name.  That would be ideal.  In order to solve this problem, i used the RadWindowManager to store an attribute indicating the confirm behavior that i wanted.... like this....

GetRadWindowManager().k_displayDenyOption =

"true";

if(displayCancel && displayCancel == "true")

GetRadWindowManager().k_displayConfirmCancel =

"true";

else

GetRadWindowManager().k_displayConfirmCancel =

"false";

Then, I modified the confirmtemplate to contain script logic to include or exclude the Cancel button.  Now, you will notice, i added logic into this template to provide the baseline 'Alert' logic as well, because the telerik control does not provide a callback function for the alert.

<confirmtemplate>

<![CDATA[

<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' originalAttribute="src" originalPath="{2}Img/AlertIcon.gif" />

{6}

<embed src="{2}Img/alert.wav" originalAttribute="src" originalPath="{2}Img/alert.wav" height="0" width="0" style="display: none;"></embed>

</div>

<br>

<center>

<button class="Button" onclick="GetRadWindow().ModalDialogCallBack(true)">

<script>

var displayDenyVar = GetRadWindow().GetWindowManager().k_displayDenyOption;

if(displayDenyVar && displayDenyVar == "false")

{

document.write(GetRadWindow().GetLocalizedString("Ok"));

}

else

{

document.write(GetRadWindow().GetLocalizedString("Yes"));

}

</script>

</button>

<button id="confirmdenybutton" class="Button" onclick="GetRadWindow().ModalDialogCallBack(false)" style="display:inline; visibility: visible">

<script>

document.write(GetRadWindow().GetLocalizedString("No"));

</script>

</button>

<button id="confirmcancelbutton" class="Button" onclick="GetRadWindow().Close()" style="display:none; visibility: hidden">

<script>

document.write(GetRadWindow().GetLocalizedString("Cancel"));

</script>

</button>

</center>

<script type="text/javascript">

var oWndMgr = GetRadWindow().GetWindowManager();

var displayCancel = oWndMgr.k_displayConfirmCancel;

if(displayCancel && displayCancel == "true")

{

oWndMgr.k_displayConfirmCancel = "false";

var x = document.getElementById("confirmcancelbutton");

if(x)

{

x.style.display = "inline";

x.style.visibility = "visible";

}

}

var displayDeny = oWndMgr.k_displayDenyOption;

if(displayDeny && displayDeny == "false")

{

oWndMgr.k_displayConfirmCancel = "true";

var y = document.getElementById("confirmdenybutton");

if(y)

{

y.style.display = "none";

y.style.visibility = "hidden";

}

}

</script>

]]>

</confirmtemplate>

[Felipe Saldana]

I have copied the code from the answer and it is not working.

The confirm dialog display  fine but when I click one of the buttons I am getting this javascript error.

Error: $find("confirm1242163557672").callBack is not a function

I do not know why the code is looking for the name "confirm1242163557672"


As, I keep running into the same wall, I think it may have to do with the fact that the code was pasted into a User Control that is on an .aspx that is in a master page.

Anyone have any ideas as to why the callback function is not a function.

Thanks,

Felipe

[Georgi Tunev]

Hello Felipe,

This is because Jim's code is for RadWindow for ASP.NET while you are using RadWindow for ASP.NET AJAX. I suggest to check the following help article for more information about the RadWindowManager's templates:
http://www.telerik.com/help/aspnet-ajax/window_dialogschangingthedialogtemplates.html



Sincerely yours,
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.

[Felipe Saldana]

Thanks.   I was not using the correct version.

Sorry about that.


Felipe