Image Browser showing undefined from inline editing context

5 posts, 0 answers
  1. Eric
    Eric avatar
    2 posts
    Member since:
    Jul 2011

    Posted 29 Sep 2013 Link to this post

    When I launch the image browser from an Editor the image seems to load up properly, however when I launch the image browser from "Inline Editing" all I get is a list of undefined objects.

    I am using version 2013.2.918. Here is the code I am using to instantiate the editors:

    Inline Editing Version:
    $(document).ready(function () {
        $(".rich-text").kendoEditor({
            encoded: false,
            tools: [
                "bold",
                "italic",
                "underline",
                "insertImage"
            ],
            imageBrowser: {
                path: "/",
                transport: {
                    read: "/cms/imagebrowser/read",
                    destroy: "/cms/imagebrowser/destroy",
                    create: "/cms/imagebrowser/create",
                    thumbnailUrl: "/cms/imagebrowser/thumbnail",
                    uploadUrl: "/cms/imagebrowser/upload",
                    imageUrl: "/content/cms/images/{0}"
                }
            }
        });
    });
    Editor Version in my CMS:
    @model string
     
    @(Html.Kendo().EditorFor(m => m)
        .Encode(false)
        .Tools(tools => tools
              .Clear()
              .Bold().Italic().Underline().Strikethrough()
              .JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
              .InsertUnorderedList().InsertOrderedList()
              .Outdent().Indent()
              .CreateLink().Unlink()
              .InsertImage()
              .SubScript()
              .SuperScript()
              .TableEditing()
              .ViewHtml()
              .Formatting()
              .FontName()
              .FontSize()
              .FontColor().BackColor()
        )
        .ImageBrowser(imageBrowser => imageBrowser
            .Image("~/content/cms/images/{0}")
            .Read("read", "imagebrowser", new { Area = "cms" })
            .Create("create", "imagebrowser", new { Area = "cms" })
            .Destroy("destroy", "imagebrowser", new { Area = "cms" })
            .Upload("upload", "imagebrowser", new { Area = "cms" })
            .Thumbnail("thumbnail", "imagebrowser", new { Area = "cms" })
        )
    )
    Can anyone tell me why these two methods would give different results? I've attached screenshots.

    Using fiddler both methods make the same exact web request and get the same exact json response.
  2. Eric
    Eric avatar
    2 posts
    Member since:
    Jul 2011

    Posted 30 Sep 2013 Link to this post

    Turns out if I add the type "imagebrowser-aspnetmvc" it resolves my issue, not sure if this is intended but it's undocumented.
    transport: {
            type: "imagebrowser-aspnetmvc",
            read: "/cms/imagebrowser/read",
            destroy: "/cms/imagebrowser/destroy",
            create: "/cms/imagebrowser/create",
            thumbnailUrl: "/cms/imagebrowser/thumbnail",
            uploadUrl: "/cms/imagebrowser/upload",
            imageUrl: "/content/cms/images/{0}"
        }
  3. elke
    elke avatar
    4 posts
    Member since:
    Jan 2017

    Posted 08 Feb 2017 in reply to Eric Link to this post

    briljant!
  4. wortho
    wortho avatar
    5 posts
    Member since:
    Nov 2013

    Posted 02 Feb in reply to Eric Link to this post

    Wow - I have been struggling with this for a couple of hours, great find thanks!
  5. Dimitar
    Admin
    Dimitar avatar
    454 posts

    Posted 05 Feb Link to this post

    Hello Steve,

    Using the built-in ImageBrowserController/FileBrowserController classes from Kendo.MVC assembly requires use of the imagebrowser-aspnetmvc/filebrowser-aspnetmvc transport type on the client-side. This is needed as the transport uses specific parameterMap which formats the request parameters in the appropriate way.

    When using the HtmlHelpers from the Telerik UI for ASP.NET MVC suite, the specified transport type is set automatically, thus there is no need to set it explicitly.

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top