Confirm dialog

[Bojan]

Can you please tell me if there is any sample of confirm dialog (with custom buttons YES/NO, OK/Cancel etc.) made using KendoUI modal window?

[Alex Gyoshev]

Hello Bojan,

There was no such sample, but since this is a very common scenario, we made one. Enjoy!

Kind regards,
Alex Gyoshev
the Telerik team

[Bojan]

Thanks

[Łukasz]

well... try this fiddle on IE8 - doesn't work :/

[Łukasz]

figure this out:

div.k-window-content {
    visibility: visible!important;
}

[Michael]

I had same issue, but wanted configurable dialog type windows. I just stared using Kendo. I came up with this

the CSS

.czDLGIcon{

    padding-right:10px;

    width:32px;

    height:32px;

    padding-bottom:10px;

    background-repeat:no-repeat;

}

 

.czDLGText{

    padding-right:20px;

    font-weight:bold;

    padding-bottom:10px;

}

 

.czDLGBtn{

  margin-right:5px;

  border: 1px solid #666;

  background-color:#0d0d0d;

  color:#d59eff;

  font-weight:bold;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;

  border-radius: 6px;

  font-size: 13px;

  padding: 4px 10px;

  outline: 0;

  -webkit-appearance: none;

  cursor:pointer;

  float:right;

}

 

.czDLGBtn:hover {

  background-color:#1d1d1d;

}

 

.czWarning{

    background-image: url('/assets/icons/dlgIcons/warning.png');

}  

 

.czInformation{

    background-image: url('/assets/icons/dlgIcons/information.png');

}

 

.czConfirm{

    background-image: url('/assets/icons/dlgIcons/confirm.png');

}

 

.czError{

    background-image: url('/assets/icons/dlgIcons/error.png');

}

.czStop{

    background-image: url('/assets/icons/dlgIcons/stop.png');

}

The Script

var czDLGResult = "Cancel";

var czDLGWindow;

var czDLGCallBack;

 

function czDLGClose(BtnResult){

    czDLGResult = BtnResult;

    czDLGWindow.close();

}; 

 

function czDLGCloseCallBack(e){

    czDLGWindow.unbind("close", czDLGCloseCallBack);

    if (czDLGCallBack !== null){

        czDLGCallBack(czDLGResult);

    }

}

 

function czDLG(Title,Message,Type,Buttons,theFunction){

    var DLGData = '<table cellpadding="0" cellspacing="0"><tr><td><div class="czDLGIcon ' + Type + '"></div></td>'+

        '<td><div class="czDLGText">'+Message+'</div></td></tr></table><div>';

        for(var i in Buttons){

            var s = Buttons[i];

            DLGData += '<input class="czDLGBtn" type="button" onclick="czDLGClose(\''+s+'\')" value="'+s+'">';

        }

    DLGData += '</div>';

    czDLGResult = "Cancel";

    if (theFunction !== undefined){

        czDLGCallBack = theFunction;

    } else {

        czDLGCallBack = null;

    }

    czDLGWindow.bind("close", czDLGCloseCallBack);

    czDLGWindow.title(Title);

    czDLGWindow.center();

    czDLGWindow.content(DLGData);

    czDLGWindow.open();

}

 

$(document).ready(function() { 

    czDLGWindow = $("#czDLGWindow").kendoWindow({

        actions: ["Close"],

        draggable: true,

        modal: true,

        resizable: false,

        visible: false,

        title: "Confirm action",

    }).data("kendoWindow");

});

Usage

put this in your body somewhere, just once 

<div id="czDLGWindow"></div>

Call like this.

<script>
function myTestClose(dlgResult){

    alert('Dialog Result: '+dlgResult);

}

 

$(document).ready(function() { 

    $("#testBtn").click(function(){

        // czWarning / czInformation / czConfirm / czError / czStop    

        czDLG("Test DLG","Are you sure?","czStop",["Cancel","OK"],myTestClose);

    });    

});
</script> 



Like I said, I'm new this but this is what I came up with and it works for me :) . In my CSS I float the buttons right, so reverse the order of the buttons.

You can make the buttons anything you like and the Text of the button will be returned to your function.

Hope this helps...

M.

[Michael]

Wow. I'd think this would have been one of the first things done and definitely one done quickly (if not first) for UI consistency. This is a nightmare though. Back to jQuery for me on this one :(

[Alex Gyoshev]

Indeed, this is a common scenario that may be implemented in the future. To show your support, please vote on the associated uservoice issue.

Regards,
Alex Gyoshev
Telerik

[Navin]

Will you guys be including a kendo dialog to the kendo framework in the next release of Kendo? I am sure it will be quite useful for not just me but for many other Kendo users/developers.

Thanks,
Nav

[Alex Gyoshev]

Hello Navin,

It is not scheduled for our short-term plans (Q3 2013). You can vote for it in the UserVoice portal mentioned above, and you will be notified once it is planned to be released.

Regards,
Alex Gyoshev
Telerik