Templates for Confirm Dialog

9 posts, 1 answers
  1. Emmet
    Emmet avatar
    13 posts
    Member since:
    Sep 2007

    Posted 04 Feb 2008 Link to this post

    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
  2. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 05 Feb 2008 Link to this post

    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
  3. Emmet
    Emmet avatar
    13 posts
    Member since:
    Sep 2007

    Posted 05 Feb 2008 Link to this post

    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


    
    
  4. Answer
    Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 06 Feb 2008 Link to this post

    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> 
                        <onclick="$find('{0}').callBack('true');" class="radwindowbutton" href="javascript:void(0);"
                            <span class="outerspan"><span class="innerspan">Yes</span></span></a>  
                             
                            <onclick="$find('{0}').callBack('false');" 
                                class="radwindowbutton" href="javascript:void(0);"><span class="outerspan"><span 
                                    class="innerspan">No</span></span></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
  5. Emmet
    Emmet avatar
    13 posts
    Member since:
    Sep 2007

    Posted 07 Feb 2008 Link to this post

    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

  6. Jim
    Jim avatar
    8 posts
    Member since:
    Aug 2006

    Posted 30 Mar 2008 Link to this post

    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>

  7. Felipe Saldana
    Felipe Saldana avatar
    62 posts
    Member since:
    Jan 2009

    Posted 12 May 2009 Link to this post

    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
  8. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 13 May 2009 Link to this post

    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.
  9. Felipe Saldana
    Felipe Saldana avatar
    62 posts
    Member since:
    Jan 2009

    Posted 13 May 2009 Link to this post

    Thanks.   I was not using the correct version.

    Sorry about that.


    Felipe
Back to Top