Get Reference to Child Widgets in the Editor
Environment
| Product | Progress® Kendo UI® Editor for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I get a reference to child widgets in the Kendo UI for jQuery Editor?
Solution
The ImageBrowser and FileBrowser components of the Editor internally use the Kendo UI Upload, ListView, and DropDownList widgets.
The following example demonstrates how to obtain these client-side objects of the widget. The FileBrowser-related code is identical to the ImageBrowser one except for:
- To attach the
clickhandler, use the.k-i-file-addCSS class instead of the.k-i-imageone. - Use
var fileBrowser = $(".k-filebrowser").data("kendoFileBrowser");instead ofvar imageBrowser = $(".k-imagebrowser").data("kendoImageBrowser");.
If you are using the 2017 R1 version or later, use the
.k-insertFileand.k-insertImageclasses to get the button elements.
To attach events with bind() or to perform other customizations that may not be otherwise supported, use the API calls of the ListView, Upload and DropDownList widget objects after they are available.
The following transport configurations are over-simplified and invalid.
<textarea name="editor" id="editor"></textarea>
<script>
$(function(){
// Initialize the Editor.
// When using Kendo UI helpers, the following statement will be auto-generated:
$("#editor").kendoEditor({
tools: [
"insertImage",
"insertFile"
],
imageBrowser: {
transport: {
read: "foo",
create: "foo",
uploadUrl: "foo"
}
},
fileBrowser: {
transport: {
read: "foo",
create: "foo",
uploadUrl: "foo"
}
}
});
// Start of the example.
// Retrieve the Editor widget object.
var editor = $("#editor").data("kendoEditor");
// Attach a click handler on the tool button, which opens the ImageBrowser dialog.
editor.toolbar.element.find(".k-i-image").parent().click(function(){
// A setTimeout is required, otherwise the ImageBrowser widget will still not be initialized.
setTimeout(function(){
// Retrieve the ImageBrowser widget object.
var imageBrowser = $(".k-imagebrowser").data("kendoImageBrowser");
console.log(imageBrowser);
// Retrieve the ListView widget object.
var listView = imageBrowser.listView;
console.log(listView);
// Retrieve the Upload widget object.
var upload = imageBrowser.upload;
console.log(upload);
// Retrieve the DropDownList widget object.
var dropdownlist = imageBrowser.arrangeBy;
console.log(dropdownlist);
});
});
// Attach a click handler on the tool button which opens the FileBrowser dialog.
editor.toolbar.element.find(".k-i-file-add").parent().click(function(){
// A setTimeout is required. Otherwise, the FileBrowser widget will still not be initialized.
setTimeout(function(){
// Retrieve the ImageBrowser widget object.
var fileBrowser = $(".k-filebrowser").data("kendoFileBrowser");
console.log(fileBrowser);
// Retrieve the ListView widget object.
var listView = fileBrowser.listView;
console.log(listView);
// Retrieve the Upload widget object.
var upload = fileBrowser.upload;
console.log(upload);
// Retrieve the DropDownList widget object.
var dropdownlist = fileBrowser.arrangeBy;
console.log(dropdownlist);
});
});
});
</script>