Confirm dialog

Thread is closed for posting
10 posts, 0 answers
  1. Bojan
    Bojan avatar
    6 posts
    Member since:
    Jan 2012

    Posted 12 Jan 2012 Link to this post

    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?
  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 13 Jan 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Bojan
    Bojan avatar
    6 posts
    Member since:
    Jan 2012

    Posted 14 Jan 2012 Link to this post

    Thanks
  5. Łukasz
    Łukasz avatar
    2 posts
    Member since:
    Feb 2012

    Posted 19 Mar 2012 Link to this post

    well... try this fiddle on IE8 - doesn't work :/
  6. Łukasz
    Łukasz avatar
    2 posts
    Member since:
    Feb 2012

    Posted 19 Mar 2012 Link to this post

    figure this out:

    div.k-window-content {
        visibility: visible!important;
    }
  7. Michael
    Michael avatar
    11 posts
    Member since:
    Mar 2012

    Posted 20 Mar 2012 Link to this post

    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.
  8. Michael
    Michael avatar
    19 posts
    Member since:
    Oct 2011

    Posted 06 Jun 2013 Link to this post

    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 :(
  9. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 06 Jun 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Navin
    Navin avatar
    12 posts
    Member since:
    Dec 2012

    Posted 17 Sep 2013 Link to this post

    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
  11. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 17 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready