[Solved] Confirmation Window

[Brendan Vogt]

Hi,

Is it possible to have a confirmation window when a user clicks a button?  I tried searching through the forums and can find nothing for MVC.  Please let me know if this is possible and if there is any sample that I can have a look at?

Thanks
Brendan

[Adam Gritt]

You could do something similar to what is done in this forum post:

var dialog = $.telerik.window.create({
        title     : "Success",
        html      : "<strong>this is a test...</strong><br/><button onclick='dialog.close()'>Close Me</button>",
        modal     : true,
        resizable : false,
        draggable : true,
        visible   : false,
        width     : 300,
        height    : 100
    })
    .data('tWindow').open();

I customized the shown script to also show adding a button that will close the window.  You can customize the "html" property with the HTML you want to use for your confirmation window and deal with setting some variables or calling a method passing what button was clicked.  This could easily be wrapped into a javascript function that takes the confirmation message and a callback function for on close as parameters and then builds out the proper window and shows it.  You would just need to make sure that anywhere you want to use this includes the required telerik javascript files which in this case I believe are telerik.common.js and telerik.window.js.

[Brendan Vogt]

Hi,

I already have the button on my page as such:

<input class="button" type="submit" value="Submit" />

How would I "link" this window up with this button?  It should have an Yes and a No button on it.  If the user selects Yes then it should continue, if it is No then it should do nothing.

I hope you understand now?

Thanks.

[Adam Gritt]

You could try doing the following:

<% Html.Telerik().ScriptRegistrar()

      .DefaultGroup(group => group.Add("telerik.common.js").Add("telerik.window.js"))

      .Render(); %>

 

<% Html.BeginForm(); %>

<button class="button" type="button" value="Submit" onclick="confirmSubmit();">Submit</button>

<% Html.EndForm(); %>

               

<script type="text/javascript">

   var dialog;

   function confirmSubmit() {

      dialog = $.telerik.window.create({

         title: "Confirmation",

         html: "Are you sure you wish to continue?<br/>" +
"<div align='center'>" +
"<button onclick='dialog.close();document.forms[0].submit();'>Yes</button>" +
"&nbsp;&nbsp;&nbsp;&nbsp;" +
"<button onclick='dialog.close()'>No</button></div>",

         modal: true,

         resizable: false,

         draggable: false,

         visible: false

      })

      .data('tWindow').center().open();

       

   }

</script>

The only catch is that if you have multiple forms on the same page you would have to correct the index for the "document.forms[0].submit()" that you want to have submitted.  However, this will perform what you need as providing a confirmation dialog box that uses the telerik window.  The other option would be to do the following using the javascript confirm dialog:

<button class="button" type="submit" value="Submit" onclick="return confirm('Are you sure you want to continue?');">Submit</button>

This option will block the submit until the user clicks on the confirmation dialog box.  The only issue with this is that if you are already using the Telerik Window elsewhere in your application that this dialog won't match the look and feel and can't be customized.

[Brendan Vogt]

Hi Adam,

Thanks for the answers.

I am trying to keep consistancy in the website.  I like the first option with the Telerik window.  However I need it to act like the Javascript confirm window.  After I implemented your Telerik window code I ran the application, I clicked on the button and the popup came up, it displayed correctly.  But it still went in to the action event.  I don't want it to go in there until the user has clicked yes.  I must work exactly the Javascript confirm, if I select no then nothing should happen.

Thanks :)

[Adam Gritt]

Do you have the type of the input control still set as "submit" or is it set to "button"?  If it is type "submit" then the button is still forcing the submit no matter what happens with the dialog as the Telerik dialog is not blocking other operations.  If you change it to type "button" then click of the "Yes" button will force the submit via the DOM.  It is tricky to directly replace the javascript Confirm dialog with something else because you have to deal with the fact that most other dialogs don't block the return until something else happens.

[Brendan Vogt]

Hi Adam,

I didn't see that it was supposed to be a button control, I changed it and it works now.  Now there is another issue.  When the popup shows for the first time, the background is grey.  If I click No then the popup disappears.  If I click the submit button again then the popup shows but the background is not grey.  Why do you think the background colour goes away?

Another issue that I also just picked up is that my validations is not being triggered.  I defined my required fields by using data annotations in my model.

Thanks.

[Adam Gritt]

Here is the solution to both issues. Change the dialog javascript as follows:

var dialog;
function confirmSubmit() {
   if (!dialog) {
      dialog = $.telerik.window.create({
         title: "Confirmation",
         html: "Are you sure you wish to continue?<br/>" +
            "<div align='center'>" +
            "<button onclick='dialog.close();document.forms[0].submit();'>Yes</button>" +
            "    " +
            "<button onclick='dialog.close();'>No</button></div>",
         modal: true,
         resizable: false,
         draggable: false,
         visible: false
      })
      .data('tWindow');
   }

   dialog.center().open();
}

function validateAndSubmit() {
   var form = document.forms[0];
   var errors = Sys.Mvc.FormContext.getValidationForForm(form).validate('submit');

   if (!(errors && errors.length)) {
      form.submit();
   }
}

The reason that the dialog isn't reshowing the Modal view is that it is recreating the dialog each time instead of reusing it.  As I did not see a way to destroy the dialog (or at least no supporting method in the telerik javascript) I setup the new javascript to keep a reference to the dialog and only recreate it if it doesn't still exist.  The validation issue is handled by explicitly invoking the client side validation check and then only doing a submit if there weren't any errors.  The code for validation is based on this link.

I hope this helps you out.

[Brendan Vogt]

Hi there,

Thanks for all the help.  Your 2 functions helped me just!  However, there is one minor issue regarding the popup.  If you click on the button the popup comes up for the first time.  Select No.  If you click the button again, then the window has scrolls bars.  It seems that the inner "space" gets small and wraps everything in it.  Is this maybe a bug?  I am currently using IE 8.   It seems to be fine in Fire Fox.

Brendan

[Adam Gritt]

I am only able to reproduce the issue in IE8 if I turn it on to Quirks Mode.  Press F12 to open the developer tools in IE and make sure the "Document Mode" is not set to Quirks.  When the document mode is anything but Quirks it seems to work fine for me.

I am glad that my help is beneficial to you.  I am working on putting this information into a helper script and posting it on the Telerik code share site.  I am wrapping all of it up so that it can be done similar to the WinForms MessageBox in .NET.  

[Brendan Vogt]

Hi,

It still seems to be "shrinking".  I set the document mode to IE8 standards.

Won't setting the window to a fixed width work?  How would I set it to a fixed width?

Brendan

[Adam Gritt]

Specifying a fixed width/height should also work to help fix it.  If you look at my first post you will see how to specify the width and height.

[Brendan Vogt]

Hi,

Me again :)

Your popup example works really well now.  However I have another issue.  I have a really long form.  When I click submit then the popup displays right at the top of the form.  So it will mean that the user will have to scroll to the top of the page to click Yes or No.  How do we get the window to display at the current part of the page where the button is clicked?

Thanks again :)

[Adam Gritt]

Brenden,

The issue you are describing sounds like the issue described here.  If you can get the latest internal build it should be fixed I believe.  If you are using the Open Source version of the MVC controls you will have to wait until Telerik decides to update it.

Adam

[Wai Kei]

Hi,

    Is it possible to modify it so that the yes/no action will return a boolean flag, pretty much like the javascript confirm will do? For example:

if (confirmYesNo())
{
    // then do something xxxxxxx
}

where,

 

 

 

function confirmYesNo() {
   if (!dialog) {
      dialog = $.telerik.window.create({
         title: "Confirmation",
         html: message + "?<br/><br/>" +
            "<div align='center'>" +
            "<button class=button onclick='dialog.close();do something???'>Yes</button>" +
            "    " +
            "<button class=button onclick='dialog.close();return false;'>No</button></div>",
         modal: true,
         resizable: false,
         draggable: false,
         width: 300,
         height: 75,
         visible: false
      })
      .data('tWindow');
   }
         
   dialog.center().open();
} 

 

[Ravindra]

This is quite informative!
How can we convert this so that the confirmation message will appear when we click on an action link button?

if we choose yes, system should be routed as per the command. otherawise it should stay as is.
thanks in advance.

[Steven]

I've tried this.  It does show the confirmation window. However, in my case the window disappears automatically after about 3 seconds and behaves as if the "Yes" button has been clicked.

It does this with several browsers. I'm using Telerik version 2012.2.607.

[vinod]

I need telerik.window as confirmation dialog which should have Ok and Cancel buttons and should return true and false.

Please anyone help me to get it done..
thanks in adv.