kendo-ui - KendoUI Image browser

Question

I have added the KendoUI Image Browser to my application but when it opens up, I get the browser (upload, select, delete, sort, search...etc) but do not get the "Insert or Cancel" buttons... Nor do I get the "Web address" and "tooltip" bit at the bottom.

I'd like to have the whole image browser (I don't want to use the editor).

Any help would be appreciated.

Instead of this:

I get this:

Here is my code:

<div id="imgBrowser"></div>

$(document).ready(function () {

            $("#imgBrowser").kendoImageBrowser({

                //imageBrowser: {
                    messages: {
                        dropFilesHere: "Drop files here"
                    },
                    transport: {
                        read: "/ImageBrowser/Read",
                        destroy: {
                            url: "/ImageBrowser/Destroy",
                            type: "POST"
                        },
                        create: {
                            url: "/ImageBrowser/Create",
                            type: "POST"
                        },
                        thumbnailUrl: "/ImageBrowser/Thumbnail",
                        uploadUrl: "/ImageBrowser/Upload",
                        imageUrl: "/ImageBrowser/Image?path={0}"
                    },
                    change: function () {
                        //this.value(); //Selected image URL
                        console.log(this.value());
                    }
               // }
            });
        });

Answer 1

从技术上讲，ImageBrowser 似乎可以在编辑器之外使用，但不受官方支持。以下是 Telerik 论坛上有关此问题的主题：

http://www.telerik.com/forums/why-not-make-image-browser-in-editor-as-separate-controle

以下是最值得注意的引语：

您可以从常规元素初始化图像浏览器小部件。配置与在编辑器中使用图像浏览器时的配置相同。

http://docs.kendoui.c​​om/api/web/editor#imagebrowser-object

<div id="imgBrowser"></div>

$("#imgBrowser").kendoImageBrowser({
    transport: {
        read: "/service/ImageBrowser/Read",
        destroy: {
            url: "/service/ImageBrowser/Destroy",
            type: "POST"
        },
        create: {
            url: "/service/ImageBrowser/Create",
            type: "POST"
        },
        thumbnailUrl: "/service/ImageBrowser/Thumbnail",
        uploadUrl: "/service/ImageBrowser/Upload",
        imageUrl: "/service/ImageBrowser/Image?path={0}"
    }
});

ImageBrowser 公开了三个事件

• 更改 - 单击文件时
• 应用 - 双击文件时
• error - 当请求失败时

change 和 apply 事件不会暴露单击的文件，但您可以通过检查哪个 .k-tile 元素具有 k-state-selected 类来找到它。

ImageBrowser 不公开与文件夹导航相关的事件。您可以使用小部件的 path() 方法获取或设置当前位置。

Answer 2

change 和 apply 事件不会暴露单击的文件，但您可以通过检查哪个 .k-tile 元素具有 k-state-selected 类来找到它。

在不检查 k-state-selected 类的情况下，可以使用类似这样的方式获取当前选定的项目：

        change: function(е) {
            var selectedImage = e.sender._selectedItem();
            console.log('selectedImage', selectedImage);
        }

我还没有检查它的应用事件。