Kendo UI-如何引用控件？

Question

Say I instantiate a Kendo control:

$("#files").kendoUpload({ 
 ...
})

How do I then get a reference to that control in JavaScript?

Answer 1

You have two ways to do this.

1. Using the getKendo* method:

   var myUpload = $("#files").getKendoUpload();

2. Using the Data method:

   var myUpload = $("#files").data("kendoUpload");

Official docs: http://docs.telerik.com/kendo-ui/intro/widget-basics/events-and-methods

Answer 2

Retrieving a widget instance

To get a reference to a widget instance, use the jQuery data method and pass the plug-in name as a string, like this :

// Create the widget
$("#files").kendoUpload({ 
 ...
})

// retrieve the widget instance
var kendoUpload = $("#files").data("kendoUpload");

You can find more info on this at the official documentation .

---

Widget events

Additionally, you can also add a whole bunch of Kendo-specific event handlers to handle events triggered by your widget :

function getFileInfo(e) {
    return $.map(e.files, function(file) {
        var info = file.name;
        // File size is not available in all browsers
        if (file.size > 0) {
            info  += " (" + Math.ceil(file.size / 1024) + " KB)";
        }
        return info;
    }).join(", ");
}

$("#files").kendoUpload({
    async: {
        saveUrl: "save",
        removeUrl: "remove",
        autoUpload: true
    },
    cancel: function(e) {
        kendoConsole.log("Cancel :: " + getFileInfo(e));
    },
    complete: function onComplete(e) {
        kendoConsole.log("Complete");
    },
    error: function(e) {
        kendoConsole.log("Error (" + e.operation + ") :: " + getFileInfo(e));
    },
    progress: function(e) {
        kendoConsole.log("Upload progress :: " + e.percentComplete + "% :: " + getFileInfo(e));
    },
    remove: function(e) {
        kendoConsole.log("Remove :: " + getFileInfo(e));
    },
    select: function(e) {
        kendoConsole.log("Select :: " + getFileInfo(e));
    },
    success: function(e) {
        kendoConsole.log("Success (" + e.operation + ") :: " + getFileInfo(e));
    },
    upload: function(e) {
        kendoConsole.log("Upload :: " + getFileInfo(e));
    }
});

You can find a fully working demo at the official documentation .

Answer 3

I now do this to get the files array of the upload control:

var logoUploader = $('#files').data('kendoUpload');
var files = logoUploader.options.files;