kendo-ui - component - kendo ui grid angular 4

Activación del evento OnCancel de carga de kendo al hacer clic en el botón

Question

Quiero cancelar la carga del archivo al hacer clic en el botón cancelar.

significa que quiero activar el evento onCancel (e) al hacer clic en mi botón cancelar

Mi código es,

 @(Html.Kendo().Upload()
  .Name("files")
   .Multiple(false)
   .Async(a => a
    .Save("UploadArtifactFile", "PP", new { TeacherEvalID = ViewBag.TeacherEvalID, ObservationID = ViewBag.ObservationID, Accountid = ViewBag.AccountID })
    .AutoUpload(false)
    .RemoveField("")
     )
    .Events(events => events
    .Success("onSuccess")
    .Select("onSelect")
    .Error("onUploadError")
    .Upload("onUpload")
     .Cancel("onCancel")
     .Remove("onRemove")
      )

   On cancel event is work as expected,  

function onCancel(e) {
        //Array with information about the uploaded files
        var files = e.files;
        e.preventDefault();
    }

Quiero hacer lo mismo para el botón Cancelar y al hacer clic en el botón cancelar tengo el código de escritura como,

function setNewArtifact() {
        var upload = $("#files").data("kendoUpload");
        //detach events and prepare for safe removal
        //upload.destroy();

        $(".k-upload-files.k-reset").find("li").remove();
        $(''#lblArtifactFileName'').val("");
        $(''#lblArtifactFileName'').hide();
        //hdnArtifactUploadIsAddOrEdit :1 for new artifact (Add)
        $(''#hdnArtifactUploadIsAddOrEdit'').val("1");
        $(''#txtArtifactDescription'').val("");
        $(''#lblArtifactFileName'').hide();
        $(''#btnModifyArtifact'').css("display", "none");
        $(''.k-upload-selected'').css("display", "none");

        //on click of cancel hide the uploading and uploaded status
        $(".k-dropzone").find("strong").css("display","none");
        $(".k-upload-status.k-upload-status-total").find("span").css("display","none");

        $.extend(upload.options.localization, {
            headerStatusUploading: "",
            headerStatusUploaded: ""
        });

    }

Hay alguna forma de hacer esto?

Por favor ayuda...

Answer 1

Puede desencadenar un evento de cancelación de carga:

$(document).ready(function() {
  $("#files").kendoUpload({
    async: {
      saveUrl: "save",
      removeUrl: "remove",
      autoUpload: true
    },
    cancel: function(e) {
      alert("cancel");
    }
  });

  $("#button").click(function(e) {
    $("#files").data("kendoUpload").trigger("cancel"); 
  });
});

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