ImageBrowser - Can't select an uploaded image.

[Zeo]

We are using the KendoUI editor with success for our clients to publish HTML embedded news items on there portals.

Now that we like to add image support with use of the ImageBrowser we however run into issues, we are using the MVC wrapper, and purchased the Compleate DevCraft Toolbox.

Used this example: http://demos.telerik.com/kendo-ui/web/editor/imagebrowser.html

First the complete example, now a straight forward version where I do inhered the EditorImageBrowserController on the controller and overwrite the ContentPath, nothing more nothing less. Just to make troubleshooting clear of the copy of the shared folder.

Uploading images and everything seems to be working nicely, when pressing the [Insert] button the URL in the [Web address] field is added to the editor.
However I am not able to select one of the uploaded images, they are not highlighted with clicking on it not is the address populated to the [Web address] field.

Double clicking one thumbnail closes the ImageBrowser but is not adding an image tag to in the Editor. Also when checking the HTML-view there are no changed made to the content.

Below some details, but seems simple enough and can't find the cause of this issue, everything should be handled by the EditorImageBrowserController, right?.
Advice and corrections are welcome !

Thanks in advance.

---

Using :
KendoUI MVC : 2013.2.716.340
KendoWeb : 2013.2.716
jQuery : 1.9.0 with migrate 1.2.1

Controller:

using System.Web.Mvc;
using Kendo.Mvc.UI;


public class ImageBrowserController : EditorImageBrowserController
{
    public override string ContentPath
    {
        get
        {
            return "~/Content/UserGenerated/Images";
        }
    }
}

Razor view:

@using Business.Models
@model Business.Models.UserContent

<div class="full_width settings">
        <h3 class="NieuwsEditor">Edit</h3>
            <p>Titel : @Html.TextBoxFor(m => m.Title, new { @class = "k-input k-textbox" })
            </p>

            <p>Release Datum : @(Html.Kendo().DatePicker()
                                    .Name("ReleaseDate")
                                    .Min(new DateTime(1999, 1, 1))
                                    .Max(DateTime.Today.AddYears(1))
                                    .Value(Model.Release)
                                )
            </p>
            <p>Organistatie Eenheid : @(Html.Kendo().DropDownList()
                                          .Name("OrgEenheid")
                                          .HtmlAttributes(new { style = "width: 250px" })
                                          .DataTextField("OEDescription")
                                          .DataValueField("OEID")
                                          .DataSource(source => {
                                              source.Read(read =>
                                              {
                                                  read.Action("GetMyOEs", "Manage");
                                              });
                                          })
                                          .Value(Model.OrgEenheid.ToString())
                                      )
            </p>

        @(Html.Kendo().Editor()
            .Name("ContentEditor")
            .HtmlAttributes(new { style = "width: 740px;height:440px" })
            .Tools(tools => tools
                  .Clear()
                  .Bold().Italic().Underline().Strikethrough()
                  .JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
                  .InsertUnorderedList().InsertOrderedList()
                  .Outdent().Indent()
                  .CreateLink().Unlink()
                  .InsertImage()
                  .SubScript()
                  .SuperScript()
                  .TableEditing()
                  .FontSize()
                  .FontColor().BackColor()
                  .ViewHtml()
            )
            .StyleSheets(css => { css.Add(Url.Content("~/Content/css/style.css")); css.Add(Url.Content("~/Content/css/fonts.css")); })
            .Value(Model.HTML)
            .ImageBrowser(imageBrowser => imageBrowser
                .Image("~/Content/UserGenerated/Images/{0}")
                .Read("Read", "ImageBrowser")
                .Create("Create", "ImageBrowser")
                .Destroy("Destroy", "ImageBrowser")
                .Upload("Upload", "ImageBrowser")
                .Thumbnail("Thumbnail", "ImageBrowser")
            )
            .Encode(false)
        )

       <p>
           <br />
           <button id="SaveContent" type="button" class="k-button right"  onclick="javascript:void(0)">Save</button>
       </p>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#SaveContent").click(function () {
            var model = {
                ContentID: '@Model.ContentID',
                ContentTypeID: '@Model.ContentTypeID',
                OrgEenheid: $("#OrgEenheid").val(),
                UserId: '@Model.UserId',
                HTML: $("#ContentEditor").val(),
                Title: $('#Title').val(),
                Release: kendo.toString($("#ReleaseDate").data("kendoDatePicker").value(), 'yyyy-MM-dd'),
                UserContentType: { ContentTypeID: '@Model.UserContentType.ContentTypeID', Type: '@Model.UserContentType.Type', UserGenerated: '@Model.UserContentType.UserGenerated' }
            };

            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: JSON.stringify(model),
                url: '@Url.Action("SaveContent", "Manage")',
                timeout: 40000,  // wait upto 40 secs
                success: function (result) {
                    HandleAjaxResult(result);
                },
                error: function (xhr, status, error) {
                    $("#editor").html("<span class=\"error\">Error</span>");
                }
            })
        });
    });
</script>

[Atanas Korchev]

Hello,

I've checked your code and couldn't find any problems in the configuration. Do you see any JavaScript errors in your browser developer tools? If you do then you may have hit some bug. The 2013.2.716 version is a bit dated and you could try upgrading to the latest one - 2013.3.1324. 

If upgrading doesn't address the issue I would ask you to submit a runnable version of your project in a support ticket so we can troubleshoot it.

Regards,
Atanas Korchev
Telerik

 

 

[Zeo]

Dear Atanas Korchev,

Thanks for the response, we just figures out about an hour ago, this is a KendoUI bug in IE10 and IE11 only, compatibility mode did not help so it took some time to figure that out.

Updating to 2013.3.1324 did solve the issue, but needed the corporate login to get the latest release.

However the 'not able to select an thumbnail in IE10/11' was not mentioned specifically as a fix in the changelog.
We think it was one of the fixes in the November 20, 2013 release of the WebUI.

Thanks for your reply.