Add confirm dialog to Upload control

6 posts, 1 answers
  1. Silver Lightning
    Silver Lightning avatar
    44 posts
    Member since:
    Feb 2014

    Posted 01 Jun 2014 Link to this post






    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
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 02 Jun 2014 Link to this post

    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.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Silver Lightning
    Silver Lightning avatar
    44 posts
    Member since:
    Feb 2014

    Posted 02 Jun 2014 in reply to Dimiter Madjarov Link to this post

    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>
  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 02 Jun 2014 Link to this post

    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.

     
  6. Silver Lightning
    Silver Lightning avatar
    44 posts
    Member since:
    Feb 2014

    Posted 02 Jun 2014 in reply to Dimiter Madjarov Link to this post

    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.
  7. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 02 Jun 2014 Link to this post

    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.

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