[Solved] Create Telerik Confirmation window inside jQuery/javascript

[Ashok]

We have Razor view with 4-5 buttons. Due to this we are not using FORM in view and using jQuery / javascript to make .post or .ajaxPost.

For e.g.
One of the button inside view looks like this:

<input type="button" id="btnReject" value="Reject" onclick="return ConfirmReject("messagedata");" />

function ConfirmReplace(message, id) { 
    var result = confirm(message); 
    if (result == true) { 
        $('#btnReplace').click(function (e) { 
            var actionUrl = BASE_APP_URL + "Manager/Replace/" + id; 
  
            $.post(actionUrl, function (data) { 
                if (data != null && data.IsValid != undefined && !data.IsValid) { 
                    //alert(data.Message); 
                    dialog = $.telerik.window.create({ 
                        title: '', 
                        html: data.Message + "<br/><br/><div align='center'><input type='button' value='OK' onclick='dialog.close();' /></div>", 
                        modal: true, 
                        draggable: true, 
                        resizable: false, 
                        width: 450, 
                        height: 110 
                    }) 
                    .data('tWindow').center().open(); 
                    document.location.href = BASE_APP_URL + "Home/Index"; 
                } 
            }); 
        }); 
    } 
}


As you can see we are using javascript confirm for confirmation. Based on javascript Confirm's OK or Cancel create Telerik Window (instead of javascript alert) to display alert window. Thus we have inconsistant look.
Is there away to create Telerik Confirmation window?

[Hristo Germanov]

Hi Tejas,

Thank you for contacting us.

You can create a confirm window with Ok and Close buttons bound to different functions. 
1. In Ok function you can create a new window and close the confirm window.
2. in Close function you can close the confirm window.

For your convenience I have attached a simple test project, which implements the suggested approach.

Regards,
Hristo Germanov
the Telerik team

[Ashok]

Hello Hristo,

Thanks for the sample project. It meets our need. Works like charm. Awesome !!!

Is it possible to hide "title bar" and "x" on telerik window?

[Hristo Germanov]

Hello Tejas,

You can remove 'x' from the telerik window overriding the actions:

dialog = $.telerik.window.create({
                        title: '',
                        html: data.Message + "...",
                        modal: true,
                        draggable: true,
                        resizable: false,
                        width: 450,
                        height: 110,
                        actions: {}
                    })

The "title bar" can be remove with jquery(as example: $('#window > .t-window-titlebar').remove()).

Greetings,
Hristo Germanov
the Telerik team

[Ashok]

Thanks Hristo.

Great !!

[Ashok]

Hi !!

Since I am using Confirmatiomtion Window for .Template and .ClientTemplate column inside Grid, Due to this, it caches my first message. No matter what row I click, I get the same message. How do I make sure same messages a with different name are displayed?

My guess is window is getting closed, not getting destroyed. As a result same message appears, but I may be wrong.

Help.

Thanks,

[Ashok]

Nevermind.. i figured out. I modified closeWindow function like this:

function closeWindow(id) {
    $("#" + id).data('tWindow').close();
    $("#" + id).data('tWindow').destroy(); 
}


I added .destroy and it works now.

[Ashok]

I need to pass params inside onclick function is it possible?

For e.g.

Current Sample shows:

function ConfirmOrderReject(message, Id) {
    var html = message + "<br/><br/><div align='center'><input type='button' value='OK' onclick='confirmReject()' /><input type='button' value='Cancel' onclick='confirmCancel()' /></div>";
    var window = $('#confirmWindow').length ? $('#confirmWindow') : createWindow('confirmWindow', html);
    window.data('tWindow').center().open();}function confirmReject() {
 ....code here
}


I want that confirmReject() method takes one or two params i.e. confirmReject(id). 

In order to do this I am modifying "ConfirmOrderReject(message, Id)'s html as:

    
var html = message + "<br/><br/><div align='center'><input type='button' value='OK' onclick='confirmReject('" + Id + "')' /><input type='button' value='Cancel' onclick='confirmCancel()' /></div>";
However I am getting javascript error. Any idea what am I doind wrong?

[Hristo Germanov]

Hi Tejas,

Can you try with this code snippet:

var html = message + "<br/><br/><div align='center'><input type='button' value='OK' onclick=confirmReject('" + Id + "') /><input type='button' value='Cancel' onclick='confirmCancel()' /></div>";

Best wishes,
Hristo Germanov
the Telerik team

[Ashok]

Hristo,

Thanks.. that took away my javascript error but gave me different problem now.

Let me give you .cshtml and javascript code snippet and see if you can help.

.cshtml code:

<input type="button" id="btnReject" value="Reject" onclick="return ConfirmProductReject('@String.Format(@LocalizedText.ProductMessage, @Model.ProductName)', @Model.productId);" />

.js file code:

function ConfirmProductReject(message, productId) {
    var html = message + "<br/><br/><div align='center'><input type='button' value='OK' onclick=confirmReject('" + productId + "') /><input type='button' value='Cancel' onclick='confirmCancel()' /></div>";
    var window = $('#confirmWindow').length ? $('#confirmWindow') : createWindow('confirmWindow', html);
    window.data('tWindow').center().open();
}


function confirmReject(productId) {
    closeWindow("confirmWindow");

    $('#btnReject').click(function (e) {
        var actionUrl = BASE_APP_URL + "ProductManager/Reject/" + productId;
        $.post(actionUrl, function (data) {
            if (data != null && data.CanReview != undefined && !data.CanReview) {
                var html = data.Message + "<br/><br/><div align='center'><input type='button' value='OK' onclick='alertOkButton();' /></div>";
                var window = $('#alertWindow').length ? $('#alertWindow') : createWindow('alertWindow', html);
                window.data('tWindow').center().open();
            }
            else {
                document.location.href = ProductHome_Url;
            }
        });
    });
}

function alertOkButton() {
    closeWindow("alertWindow");
}

This is what is happening:
- I press Reject button, confimation box pops up. If I press "OK" on confirmation, pop up closes and nothing happens. Now I have to press "Reject" again and it fires my Controller action.

- If I remove $('#btnReject').click(function (e) from confirmReject(productId), then everything works fine.

Is there a way to fire button click event as soon as I click "OK" on confirmation pop up without removing "$('#btnReject').click(function (e)"?

[Ashok]

Nevermind......

confirmReject(' " + Id + " ',' " + name + " ')


Histro,

Thanks for this: How do I pass more than one param (2 or 3 max) inside confirmReject('" + Id +"')

var html = message + "<br/><br/><divalign='center'><inputtype='button'value='OK'onclick=confirmReject('" + Id + "') /><inputtype='button'value='Cancel'onclick='confirmCancel()'/></div>";

[Hristo Germanov]

Hi Tejas,

Can you try this:

onclick='confirmReject(\""+ id+"\", \"" + name + "\")'

Best wishes,
Hristo Germanov
the Telerik team

[Roland]

When I unzip the solution and open it with visual studio 2010 I get the following error:

C:\Zip\Window\Window.csproj : error : The project file 'C:\Zip\Window\Window.csproj' cannot be opened.

The project type is not supported by this installation.

[nachid]

Usually, you get this kind of error with ASP.MVC projects when the MVC version used by the project does not match the one installed in your machine

[Ashok]

In example we are setting windows height and width.

dialog = $.telerik.window.create({
                        title: '',
                        html: data.Message + "...",
                        modal: true,
                        draggable: true,
                        resizable: false,
                        width: 450,
                        height: 110,
                        actions: {}
                    })

1) Is it possible for window to take auto width and height without scrolls?
2) Is it possible to have auto width and height with min width and height?