Are there events for the ImageBrowser?

11 posts, 0 answers
  1. King Wilder
    King Wilder avatar
    240 posts
    Member since:
    Oct 2007

    Posted 04 Aug 2013 Link to this post

    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.
  2. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 06 Aug 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. King Wilder
    King Wilder avatar
    240 posts
    Member since:
    Oct 2007

    Posted 06 Aug 2013 Link to this post

    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

  5. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 06 Aug 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. King Wilder
    King Wilder avatar
    240 posts
    Member since:
    Oct 2007

    Posted 01 Dec 2013 Link to this post

    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
  7. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 02 Dec 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. King Wilder
    King Wilder avatar
    240 posts
    Member since:
    Oct 2007

    Posted 02 Dec 2013 Link to this post

    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

  9. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 04 Dec 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. King Wilder
    King Wilder avatar
    240 posts
    Member since:
    Oct 2007

    Posted 15 Dec 2013 Link to this post

    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
  11. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 16 Dec 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  12. Dekel
    Dekel avatar
    25 posts
    Member since:
    Jan 2015

    Posted 14 May 2015 in reply to Dimo Link to this post

    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,

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