Kendo editor with ImageBrowser using MVVM doesn't open image browser dialog

Question

I have a Kendo Editor widget configured using MVVM and I am trying to add Image Browser to it, however clicking on the insertImage tool opens the default dialog (asking for a URL) instead of the image gallery browser.

Here's my widget configuration:

<textarea data-role="editor"
          data-tools="['bold', 'italic', 'underline', 'strikethrough',
                       'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull',
                       'insertUnorderedList', 'insertOrderedList', 'indent', 'outdent',
                       'createLink', 'unlink', 'insertImage',
                       'subscript', 'superscript',
                       'createTable', 'addRowAbove', 'addRowBelow', 'addColumnLeft', 'addColumnRight', 'deleteRow', 'deleteColumn',
                       'viewHtml', 'print', 'separator',
                       'formatting', 'cleanFormatting',
                       'fontName', 'fontSize', 'foreColor', 'backColor']"
          data-image-browser="{
              messages: {
                  dropFilesHere: 'Drop files here'
              },
              transport: {
                  read: '@Url.Action("Read", "ImageBrowser")',
                  destroy: {
                      url: '@Url.Action("Destroy", "ImageBrowser")',
                      type: 'POST'
                  },
                  create: {
                      url: '@Url.Action("Create", "ImageBrowser")',
                      type: 'POST'
                  },
                  thumbnailUrl: '@Url.Action("Thumbnail", "ImageBrowser")',
                  uploadUrl: '@Url.Action("Upload", "ImageBrowser")',
                  imageUrl: '@Url.Action("Image", "ImageBrowser")?path={0}'
              }
          }"
          data-bind="value: currentContent, events: { change: contentChange, paste: contentPaste }"
          style="height: 450px">
</textarea>

Does anyone know if this configuration is supported (MVVM) or what am I missing? No JS errors logged in console and looking at the produced HTML all paths from the Url.Action helpers are correct.

inspect editor in browser, looks like your `@Url.Action` is not rendering, maybe this way helps: `@(Url.Action("Read", "ImageBrowser"))` — Gene R, Nov 30 '15 at 18:38
As I stated in my original question, `@Url.Action` helpers render fine and output the correct URL's to the right actions. — Vesselin Obreshkov, Nov 30 '15 at 18:57

Padhraic · Answer 1 · 2016-04-20T02:25:27.270

To make the transport recognize your '/[controller]/[Action]' style URLs outputted by your @Url.Action("ReadFiles", "FileBrowser") calls you need to add type: 'imagebrowser-aspnetmvc' to the image browser transport and type: 'filebrowser-aspnetmvc' to the file browser transport.

This type attribute is undocumented, probably because you are not really supported to use @Url.Action call with MVVM. But if you create the editor with the MVC helper functions you can see it added by kendo to the outputted html.

Here is a working MVVM editor with image and file browser example:

<textarea id="DetailsOfChange"
      name="DetailsOfChange"
      data-role="editor"
      data-encoded="false"
      data-tools="['bold', 'bold', 'italic', 'underline', 'strikethrough', 'justifyLeft', 'justifyCenter',  'justifyRight', 'justifyFull', 'insertUnorderedList', 'insertOrderedList', 'indent', 'outdent', 'createLink', 'unlink', 'insertImage', 'insertFile', 'createTable', 'addRowAbove', 'addRowBelow', 'addColumnLeft', 'addColumnRight', 'deleteRow', 'deleteColumn', 'formatting', 'cleanFormatting', 'foreColor', 'backColor']"
      data-image-browser="{
                transport: {
                    read: '@Url.Action("Read", "ImageBrowser")',
                    type: 'imagebrowser-aspnetmvc',
                    destroy: {
                        url: '@Url.Action("Destroy", "ImageBrowser")',
                        type: 'POST'
                    },
                    create: {
                        url: '@Url.Action("Create", "ImageBrowser")',
                        type: 'POST'
                    },
                    thumbnailUrl: '@Url.Action("Thumbnail", "ImageBrowser")',
                    uploadUrl: '@Url.Action("Upload", "ImageBrowser")',
                    imageUrl: '@Url.Action("Image", "ImageBrowser")?path={0}'
                }
            }"
      data-file-browser="{
                transport: {
                    read: '@Url.Action("Read", "FileBrowser")',
                    type: 'filebrowser-aspnetmvc',
                    destroy: {
                        url: '@Url.Action("Destroy", "FileBrowser")',
                        type: 'POST'
                    },
                    create: {
                        url: '@Url.Action("Create", "FileBrowser")',
                        type: 'POST'
                    },
                    uploadUrl: '@Url.Action("Upload", "FileBrowser")',
                    fileUrl: '@Url.Action("File", "FileBrowser")?path={0}'
                }
            }"
      data-bind="value:DetailsOfChange"></textarea>

Kendo editor with ImageBrowser using MVVM doesn't open image browser dialog

1 Answers1