Add confirm dialog to Upload control

[Silver Lightning]

Hi,



Great day.



Just would like to seek help in adding confirmation dialog to my upload
window. I added confirm dialog on select event but I did not know to
implement it properly. All I want is when the user select yes, the
upload event proceed but if the user select "No", the the confirm dialog
will close and the main kendow will close also..



Here's my code:







    $(document).ready(function () {



        var lookup = $("#ComboLookupTable").data("kendoComboBox");

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

        });



        $("#files").kendoUpload({

            async: {

                saveUrl: "UploadFile/Lookup",

                autoUpload: false,

                value: 'Import'

            },

            multiple: false,

            progress: function (e) {



            },

           

            select: function (e) {

                debugger;

                var kendoWindow2 = $("<div />").kendoWindow({

                    title: "Replace Lookup Table Data?",

                    resizable: false,

                    modal: true

                });



                kendoWindow2.data("kendoWindow")

                    .content($("#delete-confirmation").html())

                    .center().open();



                kendoWindow2

                    .find(".delete-confirm,.delete-cancel")

                        .click(function () {

                            if ($(this).hasClass("delete-cancel")) {

                                debugger;

                                //e.preventDefault();

                                e.close();

                                kendoWindow2.data("kendoWindow").close();

                                //return;

                            }

                            else {

                                debugger;

                                kendoWindow2.data("kendoWindow").close();

                            }

                        })

                       // .end()

            },

            localization: {

                select: "Select a file",

                uploadSelectedFiles: "Import",

                remove: "Remove"

            },

            upload: function (e) {

                debugger;



                e.data = { additional: $("#ComboLookupTable").val() };

                debugger;

            }

            //upload: onUpload

            //select: onSelect



        });

    });









<script id="delete-confirmation" type="text/x-kendo-template">

    <p class="delete-message">This will replace all of the existing data for lookup table</p>

    <p></p>

    <p> Are you sure?</p>



    <button class="delete-confirm k-button">Yes</button>

    <button class="delete-cancel k-button">No</button>

</script>







I hope you could help me on this. Thank you in advance. God bless

[Dimiter Madjarov]

Hi Jesureno,


The current behavior cannot be implemented with the Kendo UI Window, because there is no way to stop the script execution and wait for the yes/no buttons click to indicate whether to prevent the event or not. A possible workaround would be to use the built in JavaScript confirm dialog.
E.g.

function onSelect(e) {
    var ok = confirm("Are you sure?");

    if (!ok) {
        e.preventDefault();
    }
}

Regards,
Dimiter Madjarov
Telerik

 

 

[Silver Lightning]

Hi Sir,

I followed your code snippet, but there's more complicated situation occurred, on upload event, it cannot call the UploadFile actionresult from controller, I don't know what's wrong with this code.

<form style="width:100%; height: 100%;">
<div class="demo-section">

<div style="border: 1px solid lightgray;height:230px;">
<div style="padding-top:5px;padding-left:10px;">
@(Html.Kendo().ComboBox().Name("ComboLookupTable") _
.HtmlAttributes(New With {.style = "width:300px;"}) _
.Filter("contains") _
.Placeholder("Select lookup table...") _
.DataTextField("Text") _
.DataValueField("Value") _
.BindTo(New List(Of SelectListItem)() From { _
New SelectListItem() With { _
.Text = "Conversion Factors", _
.Value = "1" _
}, _
New SelectListItem() With { _
.Text = "Electrical Region Emission Factors", _
.Value = "2" _
}, _
New SelectListItem() With { _
.Text = "Electrical SubRegion Emission Factors", _
.Value = "3" _
}, _
New SelectListItem() With { _
.Text = "Fuel Efficiencies", _
.Value = "4" _
}, _
New SelectListItem() With { _
.Text = "Global Emission Factors", _
.Value = "5" _
}, _
New SelectListItem() With { _
.Text = "Global Warming Potential", _
.Value = "6" _
} _
}) _
.SelectedIndex(-1) _
.Suggest(True))
</div>
<div style="height:15px;"></div>


<input type="file" name="files" id="files" />

</div>
<div style="height:20px;"></div>

<div style="text-align:center;">
@*<input type="submit" value="Import" class="k-button" style="width:70px;" />&nbsp;*@
<button id="btnImportCancel" type="button" class="k-button">&nbsp;Cancel&nbsp;</button>
</div>
</div>
</form>
</div>

</div>

<script>


var dialog = $("#ImportDetails").data("kendoWindow");
dialog.center();


$("#btnImportCancel").kendoButton({
click: function (e) {
dialog.close();
}
});


$(document).ready(function () {



var lookup = $("#ComboLookupTable").data("kendoComboBox");


$("#files").kendoUpload({
multiple: false,
async: {
saveUrl: "UploadFile/Lookup",
autoUpload: false,
value: 'Import'
},
localization: {
select: "Select a file",
uploadSelectedFiles: "Import",
remove: "Remove"
},
select: onSelect,
upload: onUpload

});

function onSelect(e) {
debugger;
var ok = confirm("Import Data, Are you sure?");

if (!ok) {
e.preventDefault();
}
else {
e.data = { additional: $("#ComboLookupTable").val() };
}
};

function onUpload(e) {
debugger;

var additional = $("#ComboLookupTable").val;
e.data = additional;

}
});


 });

 
</script>

[Dimiter Madjarov]

Hello Jesureno,


The snippet from my previous post does not relates to the request to the Controller action. Could you please elaborate further what is the exact issue? As for the provided code sample, I would suggest you to only use the upload event handler to attach the additional data.
E.g.

function onUpload(e) {
   var additional = $("#ComboLookupTable").val;
   e.data = {
       additional : additional
   };
});

I am looking forward to hearing from you.

Regards,
Dimiter Madjarov
Telerik

 

 

[Silver Lightning]

Hi Sir,

Here's the complete code which the execution in the controlller is not functioning during upload.

@Code
Layout = ""
End Code
@ModelType List(Of SPIMS.ViewModel.FuelEfficiencyViewModel.Index)


<div class="PopupGridHeadingText">Import Lookup Table Data</div>
<div class="myHrInDiv" />
<div class="vertical-space-medium"></div>

<div class="PopupGrid">


<div id="details-container">
@*<form method="post" action='@Url.Action("UploadFile")' style="width:100%; height: 100%;">*@
<form style="width:100%; height: 100%;">
<div class="demo-section">

<div style="border: 1px solid lightgray;height:230px;">
<div style="padding-top:5px;padding-left:10px;">
@(Html.Kendo().ComboBox().Name("ComboLookupTable") _
.HtmlAttributes(New With {.style = "width:300px;"}) _
.Filter("contains") _
.Placeholder("Select lookup table...") _
.DataTextField("Text") _
.DataValueField("Value") _
.BindTo(New List(Of SelectListItem)() From { _
New SelectListItem() With { _
.Text = "Conversion Factors", _
.Value = "1" _
}, _
New SelectListItem() With { _
.Text = "Electrical Region Emission Factors", _
.Value = "2" _
}, _
New SelectListItem() With { _
.Text = "Electrical SubRegion Emission Factors", _
.Value = "3" _
}, _
New SelectListItem() With { _
.Text = "Fuel Efficiencies", _
.Value = "4" _
}, _
New SelectListItem() With { _
.Text = "Global Emission Factors", _
.Value = "5" _
}, _
New SelectListItem() With { _
.Text = "Global Warming Potential", _
.Value = "6" _
} _
}) _
.SelectedIndex(-1) _
.Suggest(True))
</div>
<div style="height:15px;"></div>
@*@(Html.Kendo().Upload() _
.Name("files") _
.Multiple(False))*@


<input type="file" name="files" id="files" />

</div>
<div style="height:20px;"></div>

<div style="text-align:center;">
@*<input type="submit" value="Import" class="k-button" style="width:70px;" />&nbsp;*@
<button id="btnImportCancel" type="button" class="k-button">&nbsp;Cancel&nbsp;</button>
</div>
</div>
</form>
</div>

</div>

<script>

var dialog = $("#ImportDetails").data("kendoWindow");
dialog.center();
//var dialog = $("#ImportDetails").data("kendoWindow")({
// actions: [ "Refresh" ]
//});

$("#btnImportCancel").kendoButton({
click: function (e) {
dialog.close();
}
});




$(document).ready(function () {



var lookup = $("#ComboLookupTable").data("kendoComboBox");
$("#get").click(function () {
});

$("#files").kendoUpload({
async: {
saveUrl: "UploadFile/Lookup",
removeUrl: "remove",
autoUpload: false,
value: 'Import'
},
multiple: false,
progress: function (e) {

},
upload: function (e) {
// debugger;
var kendoWindow = $("<div />").kendoWindow({
title: "Replace Lookup Table Data?",
resizable: false,
modal: true
});

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

kendoWindow
.find(".delete-confirm,.delete-cancel")
.click(function () {
if ($(this).hasClass("delete-cancel")) {

e.preventDefault();
// kendoWindow.data("kendoWindow").close();
//return;
}
else {
e.data = { additional: $("#ComboLookupTable").val() };
}

kendoWindow.data("kendoWindow").close();
})
//.end()



// ---------

//e.data = { additional: $("#ComboLookupTable").val() };
},
select: function (e) {
// debugger;
e.data = { additional: $("#ComboLookupTable").val() };
},
localization: {
select: "Select a file",
uploadSelectedFiles: "Import",
remove: "Remove"
}
//upload: onUpload
//select: onSelect

});
});

function onSelect(e) {
debugger;
var additional = $("#ComboLookupTable").val;
e.data = additional;
};

function onUpload(e) {
debugger;
var additional = $("#ComboLookupTable").val;
e.data = additional;
}

//Upload caption
//$("#files").closest(".k-upload-button")
// .find("span")
// .text("Select file...");

</script>

@*<button class="delete-button k-button">Delete record</button>*@

<script id="delete-confirmation" type="text/x-kendo-template">
<p class="delete-message">This will replace all of the xisting data for lookup table</p>
<p></p>
<p> Are you sure?</p>

<button class="delete-confirm k-button">Yes</button>
<button class="delete-cancel k-button">No</button>
</script>


Here's the controller's code:

'Upload File (excel)
<HttpPost> _
Public Function UploadFile(ByVal files As HttpPostedFileBase, ByVal additional As String) As ActionResult

Dim data = (New ExcelReader()).ReadExcel(files)

Select Case additional
Case FuelEfficiencyViewModel.Table.Lookup.ConversionFactors
Return View()
Case FuelEfficiencyViewModel.Table.Lookup.ElectricalRegionalEmissionFactors
Return View()
Case FuelEfficiencyViewModel.Table.Lookup.ElectricalSubRegionEmissionFactors
Return View()
Case FuelEfficiencyViewModel.Table.Lookup.FuelEfficiecies
Dim ent As New List(Of ViewModel.FuelEfficiencyViewModel.Create)

For Each datarow In data.DataRows
ent.Add(New ViewModel.FuelEfficiencyViewModel.Create With {.VehicleClass = datarow(0).ToString, _
.FuelEfficiencyValue = Convert.ToDecimal(datarow(1)), _
.CreatedBy = Session(LocalConstant.Ses_UserID), _
.CreatedDate = Now.Date})
Next
_fuelefficiencyRepository.Create(ent)
Return View()
Case FuelEfficiencyViewModel.Table.Lookup.GlobalEmissionFactors
Return View()
Case FuelEfficiencyViewModel.Table.Lookup.GlobalWarmingPotential
Return View()

End Select


'Session(LocalConstant.SessionExcelData) = resultList

Return View("Index", data.Status)
'Return View()
End Function



Thank you in advance and God bless.

[Dimiter Madjarov]

Hi Jesureno,


It is still not clear for us what is the new issue in the current case.

There are two Upload widgets - one synchronous and one asynchronous - which one is causing the problem? Is the request not send to the Action or it is sent successfully, but the files are not there?

In order to best describe the problem, I would suggest you to send us an isolated project, which demonstrates it. This way we will be able to debug it and inspect it locally, which will lead to faster resolving.

Regards,
Dimiter Madjarov
Telerik