ImageBrowser Missing File Icon

[Joel]

Hi,

  I am using ImageBrowser as a standalone widget without Editor.

<div>
                    @(Html.Kendo().PanelBar()
                        .Name("panelbar")
                        .ExpandMode(PanelBarExpandMode.Multiple)
                        .Events(events => events
                                .Expand("onExpand")
                            )
                        .Items(panelbar =>
                        {
                            panelbar.Add().Text("Image Browser")
                                .Expanded(false)
                                .Content(@<div id="imgBrowser"/>);
                        })
                    )
</div>

<script>
    $("#imgBrowser").kendoImageBrowser({
        transport: {
            type: "imagebrowser-aspnetmvc",
            read: "/ImageBrowser/Read",
            destroy: {
                url: "/ImageBrowser/Destroy",
                type: "POST"
            },
            create: {
                url: "/ImageBrowser/Create",
                type: "POST"
            },
            imageUrl: "@Url.Content("~/shared/UserFiles/Images/{0}")",
            thumbnailUrl: "/ImageBrowser/Thumbnail",
            uploadUrl: "/ImageBrowser/Upload",
        },
        change: insertImagePath
    });
</script>

 

When the PanelBar is expanded & ImageBrowser is loaded, the file icon is missing. Please see the attached picture.

Can you let me know how to display the file icon?

[Veselin Tsvetanov]

Hi Joel,

If you need to display the default thumbnail icon for the files loaded by the ImageBrowser, you should simply skip the thumbnailUrl configuration:

$("#imgBrowser").kendoImageBrowser({
    transport: {
        type: "imagebrowser-aspnetmvc",
        read: "/ImageBrowser/Read",
        destroy: {
            url: "/ImageBrowser/Destroy",
            type: "POST"
        },
        create: {
            url: "/ImageBrowser/Create",
            type: "POST"
        },
        imageUrl: "@Url.Content("~/shared/UserFiles/Images/{0}")",
        //thumbnailUrl: "/ImageBrowser/Thumbnail",
        uploadUrl: "/ImageBrowser/Upload",
	},
	change: function (e) { }
});

Attached you will find a small sample implementing the above suggestion.

I hope that this helps. If you have any other questions, please do not hesitate to contact us.

Regards,
Veselin Tsvetanov
Progress Telerik

[Joel]

Hi Veselin,

  It works. 

  Thanks.