This is a migrated thread and some comments may be shown as answers.

Add confirm dialog to Upload control

5 Answers 118 Views
Upload
This is a migrated thread and some comments may be shown as answers.
Silver Lightning
Top achievements
Rank 1
Silver Lightning asked on 02 Jun 2014, 04:40 AM





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

5 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 02 Jun 2014, 10:12 AM
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
 

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.

 
0
Silver Lightning
Top achievements
Rank 1
answered on 02 Jun 2014, 11:02 AM
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>
0
Dimiter Madjarov
Telerik team
answered on 02 Jun 2014, 11:46 AM
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
 

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.

 
0
Silver Lightning
Top achievements
Rank 1
answered on 02 Jun 2014, 11:53 AM
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.
0
Accepted
Dimiter Madjarov
Telerik team
answered on 02 Jun 2014, 12:39 PM
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
 

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.

 
Tags
Upload
Asked by
Silver Lightning
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Silver Lightning
Top achievements
Rank 1
Share this question
or