Add confirm dialog before click the upload button not working properly on select event in kendo upload

Thread is closed for posting
2 posts, 0 answers
  1. Silver Lightning
    Silver Lightning avatar
    44 posts
    Member since:
    Feb 2014

    Posted 20 Jun 2014 Link to this post

    Hi to all,

    Great day

    Can you help me on how to add properly the confirm dialog before click the upload button on select event in kendo upload.
    Below is the code where the confirm dialog is appearing but still the upload is still in-progress which is not right.
    It should wait for the user to confirm the upload yes or no before progress event is activated.

    Here's my code below:

    $(document).ready(function () {

            var lookup = $("#ComboLookupTable").data("kendoComboBox");
            $("#files").kendoUpload({
                async: {
                    saveUrl: "Lookup/UploadFile",
                    autoUpload: false,
                    value: 'Import'
                },
                localization: {
                    select: "Select a file",
                    uploadSelectedFiles: "Import",
                    headerStatusUploaded: "File validation",
                    headerStatusUploading: "File uploading...",
                    statusFailed: "Uploading file failed",
                    statusUploaded: "File validating...",
                    statusUploading: "Uploading..."
                },
                multiple: false,
                select: function (e) {
                    confirmUpload(e);
                                  
                },
                progress: function (e) {
                    debugger;
                    onProgress(e);
                },
                upload: function (e) {
                   // debugger;
                    lookup.enable(false);
                    this.element.prop("disabled", true);
                    this.element.closest(".k-button").addClass("k-state-disabled");
                     e.data = { selectedTable: $("#ComboLookupTable").val() };
                },
               
                success: function (e) {
                    //debugger;
                    resetUpload();
                    if (e.XMLHttpRequest.responseText != '' && e.response != 'gridESREF' && e.response != 'gridFuelEfficiency' && e.response != 'gridConversionFactor' &&
                        e.response != 'gridGlobalEmissionFactor' && e.response != 'gridElectricalRegionalEmissionnFactor' && e.response != 'gridGWP') {
                        showErrorMsgsJson(e.XMLHttpRequest.responseText, 'windowDialog');
                        e.preventDefault();
                        dialog.close();
                    }
                    else {
                        var delay = 1500;
                        setTimeout(function () {
                            //grid names;
                            //gridRefresh(e.response);
                            dialog.close();
                        }, delay);
                    }
                },
                complete: function (e) {
                    resetUpload();
                    this.element.prop("disabled", false);
                    this.element.closest(".k-button").removeClass("k-state-disabled");
                    lookup.enable(true);
                },
                error: function (e) {
                    resetUpload();
                    if (e.XMLHttpRequest.responseText != '') {
                        showErrorMsgsJson(e.XMLHttpRequest.responseText, 'windowDialog');
                        e.preventDefault();
                        dialog.close();
                    }
                }

            });
        });

     
    //Here's the function of my confirm dialog called by select event.


        function confirmUpload(e) {
            window.setTimeout(function () {
                $(".k-upload-selected").click(function (e) {
                    // custom logic
                    var kendoWindow = $("<div />").kendoWindow({
                        title: "Replace Lookup Table Data?",
                        height: 130,
                        width: 280,
                        resizable: false,
                        modal: true,
                        animation: {
                            open: {
                                effects: "fade:in",
                                duration: 500
                            },
                            close: {
                                effects: "slide:right fadeOut",
                                duration: 500
                            }
                        },
                        visible: false
                    });

                    kendoWindow.data("kendoWindow")
                        .content($("#upload-confirmation").html())
                        .center().open();

                    kendoWindow
                        .find(".upload-confirm,.upload-cancel")
                            .click(function () {
                                if ($(this).hasClass("upload-cancel")) {
                                    // If no
                                    kendoWindow.data("kendoWindow").close();
                                    e.preventDefault();
                                    dialog.close();
                                    return false;
                                }
                                else {
                                    // If yes
                                    kendoWindow.data("kendoWindow").close();
                                }
                            })
                                    
                });
            }, 1);
           
        }


    Thank you and God bless.
  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 20 Jun 2014 Link to this post

    Hi,

    I'm closing this thread as duplicate of How to add confirm dialog before clicking the upload button.

    Regards,
    T. Tsonev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top