Are there events for the ImageBrowser?

[King Wilder]

The documentation doesn't show that there are events for the ImageBrowser, such as Change, Upload, etc.  Are there any?

If not, it would be nice in a future version, this way I can wrap my images in an HTML snippet for styling when I click Insert Image.

Just a thought.

[Dimo]

Hi King,

The ImageBrowser exposes the following events:

change - triggered when the user selects (clicks on) an image thumbnail
apply - triggered when the user confirms (double-clicks on) an image thumbnail
error - triggered when a read or upload ajax request fails

These events are primarily intended for internal use, but you can add handlers too, using the standard approach:

http://docs.kendoui.com/getting-started/widgets#subscribing-to-the-events-of-a-kendo-ui-widget

Please be aware that the Editor's ImageBrowser widget does not exist on the page until the Image dialog is opened.

The ImageBrowser client object is attached to the div.k-imagebrowser element.
 

Regards,
Dimo
Telerik

[King Wilder]

Hi Dimo,
I get an error saying the event doesn't exist when using the MVC wrappers.

I want to use the events to wrap the img tag with additional HTML elements for styling, etc. Is this possible using the Change event? Or any of these events?

Thanks

[Dimo]

Hi King,

You should bind the event using the widget's bind() method, as described at

http://docs.kendoui.com/getting-started/widgets#example---subscribe-to-an-event-using-the-bind-method

The method can be used after the image dialog is displayed, i.e. you can attach a click handler to a.k-insertImage, then use setTimeout (the exact value does not matter) to wait for the ImageBrowser widget to be created, obtain reference to the widget and bind the new handler.

Regards,
Dimo
Telerik

[King Wilder]

It's been a long time since I worked on this issue but I'm back on it again.

I'm using an uploaded demo by Rosen from this support post, http://www.kendoui.com/forums/kendo-ui-web/editor/implementing-image-browser-for-editor.aspx, and I'm trying to get the ImageBrowser Change event to work and I'm having no luck.

At the bottom of this post are the few lines of code I've added to the example to see if the change event is firing (externally) and it doesn't seem to be.  It was mentioned that these events are meant to be used internally by the Image Browser, so maybe that's why I can't reach them.

What I want to do

What I would like to be able to do is open the ImageBrowser, select an image, and then have HTML code inserted that is more than simply the "img" tag.  I would like to have some custom HTML inserted such as PrettyPhoto HTML with the image information, so I don't have to manually enter all that code for each image in the post.

So the inserted code might look like this:

<a class="blogpost-thumb fl mrb-20" href="/Content/UserFiles/Images/charleston2.jpg" rel="prettyPhoto" title=""><img alt="" src="/Content/UserFiles/Images/charleston2_thumb.jpg" title="Alley to waterfront" /><br />Alley to waterfront</a>

Can you let me know if there is any way of doing what I want to do?

Here's my modified code of the demo example:

01.$(document).ready(function () {
02.
03.    function insertImageSnippet(e){
04.        alert("function executed.");
05.    }
06.
07.    $("#editor").kendoEditor({
08.        imageBrowser: {
09.            transport: {
10.                read: "@Url.Action("Read", "ImageBrowser")",
11.                destroy: {
12.                    url: "@Url.Action("Destroy", "ImageBrowser")",
13.                    type: "POST"
14.                },
15.                create: {
16.                    url: "@Url.Action("Create", "ImageBrowser")",
17.                    type: "POST"
18.                },
19.                thumbnailUrl: "@Url.Action("Thumbnail", "ImageBrowser")",
20.                uploadUrl: "@Url.Action("Upload", "ImageBrowser")",
21.                imageUrl: "ImageBrowser/Image?path={0}"
22.            },
23.            change: insertImageSnippet
24.
25.        }
26.    });
27.});

My additions are lines 3-5 and line 23.  My alert doesn't fire.

Any help here is appreciated.

Thanks,

King Wilder

[Dimo]

Hi King,

It seems that you have totally ignored my instructions, which are just above your last post. Is there anything unclear about them?

Regards,
Dimo
Telerik

[King Wilder]

Dimo,

I did NOT ignore your instructions, it was a mistake on my part that I missed your post.

I have been able to get a click event to work on the ImageBrowser dialog Insert button, but now I need to know how to get information for the selected item.  I was not able to get the value of the selected item using this example, but modified for the image browser.

function autocomplete_change(e) {
    var autocomplete = e.sender;
    var value = autocomplete.value();
    alert(value); // Displays the value of the AutoComplete widget
}

I need access to these values:

• the image file name
• the Alt text

Can you show me how to access these values?  Then I would need to know the best way to insert my custom HTML into the selection point in the editor.

Thanks,

King Wilder

[Dimo]

Hi King,

Once the ImageBrowser change event is fired, you can retrieve the selected item by its CSS class - k-state-selected. Note that this class is used by other widgets as well, so you will need an appropriate selector / expression to retrieve the selected image. The filename is placed inside a <strong> element inside the selected element.

$("#EditorID").kendoEditor({ /* ... */ });

$("#EditorID .k-insertImage").click(function(e){
    window.setTimeout(function(){
      $(".k-imagebrowser").data("kendoImageBrowser").bind("change", function(e){
         var filename = $(".k-imagebrowser").find(".k-state-selected").children("strong").text();
         alert(filename);
      });
   });
});

Although you can easily see it in the browser DOM inspector, here is a sample of the HTML markup of a single ImageBrowser item, which in this case is also selected.

<li class="k-tile k-state-selected" data-uid="2dbb6c38-779b-478f-890b-e9955137f0bf" data-type="f" role="option" aria-selected="true">
   <div class="k-thumb">
      <img alt="demos-mobile.png" src="/service/ImageBrowser/Thumbnail?path=demos-mobile.png" class="k-image" />
   </div>
   <strong>demos-mobile.png</strong>
   <span class="k-filesize">15.89 KB</span>
</li>

Inserting content in the Editor via code is achieved via the Editor's exec method with an inserthtml command name. This is demonstrated at:

http://docs.kendoui.com/api/web/editor#methods-exec

http://demos.kendoui.com/web/editor/custom-tools.html

Regards,
Dimo
Telerik

[King Wilder]

Hi Dimo,

I got it to work in my project where I can select an image in the ImageBrowser from the list of images and get the image name and the alt text that I enter into the text box.  The image browser still places the standard image HTML into the editor.

<img alt="Alley to waterfront." src="ImageBrowser/Image?path=thumbnails/charleston2.jpg" />

Is there a way to prevent this?  I want to put in my HTML for the image that looks like this:

<a class="blogpost-thumb fl mrb-20" href="/Content/UserFiles/Images/charleston2.jpg" rel="prettyPhoto" title="">
    <img alt="" src="ImageBrowser/Image?path=thumbnails/charleston2_thumb.jpg" title="Alley to waterfront" /><br />
    Alley to waterfront
</a>

My HTML will use prettyPhoto so I can click on a thumbnail image and then view an larger image.  Any help is appreciated.

Thanks,

King Wilder

[Dimo]

Hi King,

You have two options:

1. Use a custom image insertion tool with a custom Kendo UI Window popup, which contains a standalone ImageBrowser inside. You already know how to handle ImageBrowser events, so when the user picks a file, use the Editor's exec() method to perform an inserthtml command with any HTML that you like.

2. Use your current implementation, subscribe to the ImageBrowser's apply event, locate the newly inserted image in the Editor's body (e.g. by its URL), and modiy the DOM, according to your preferences, just like you would do that with a regular HTML markup on the page. You will need to use setTimeout, because the image is still not present in the Editor's content area at the time the apply event is fired.

Regards,
Dimo
Telerik

[Dekel]

King hi,

Did you succeed in what you wanted to do?

I would appreciate it very much if you can upload an example because I'm in the same situation. (maybe for the code library?)

 

Thanks,