This question is locked. New answers and comments are not allowed.
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.
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.