Use kendoImageBrowser as standalone.

[Philippe]

Hi,

I wanted to use the widget kendoImageBrowser without using the editor and put it in a kendoWindow.

The purpose was to connect this ImageBrowser to my own API.

I managed to do that but I still have several problems and I can't find where they come from :

1) Uncaught TypeError: t.kendoEditable is not a function                    kendo.listview.js:438

That happen when I try to create a folder. It's not even entering in the create method.

2) The thumbnails are not display automatically, I have to scroll or move to another folder for them to activate.

Here is my code :

 

var self = this;
$(this.id).kendoWindow({
    width: "615px",
    title: "Upload Images",
    resizable: false,
    draggable: false,
    modal: true,
    visible: false,
    content: {
        template: '<div id="imgBrowser"></div>'
    }
});
$("#imgBrowser").kendoImageBrowser({
    transport: {
        type: "imagebrowser-aspnetmvc",
        read: function (options) {
            var data = options.data;
            var posting = $.post(self.serverUrl + self.readUrl, { path: data.path });

            posting.done(function (data) {
                if (data.length != 0)
                    options.success(data);
                else {
                    options.success([]);
                }
            });
            posting.fail(function (data) {
                options.error(data);
            });
        },
        destroy: {
            url: self.serverUrl + self.destroyUrl,
            type: "POST"
        },
        create: {
            url: self.serverUrl + self.createUrl,
            type: "POST"
        },
        uploadUrl: self.serverUrl + self.uploadUrl,
        thumbnailUrl: self.serverUrl + self.thumbnailUrl,
        imageUrl: self.serverUrl + self.imageUrl
    }
});

 

Maybe I wasn't clear enough, don't hesitate if you want more informations on my problem.

Regards.

 

[Ianko]

Hi Philippe,

I created a dojo with a standalone Image Browser and with the built-in services everything runs fine: http://dojo.telerik.com/EFoxA. You can also check the service implementation here: https://github.com/telerik/kendo-ui-demos-service/blob/master/KendoCRUDService/Controllers/ImageBrowserController.cs.

Regards,
Ianko
Telerik

 

 

[Philippe]

Hi Lanko,

I finally found my error, the code that I sent you was good the problem came from the kendo script created via custom-download

If I replace this (which represent all of the kendo librairies compile in my kendo.custom.min.js):

<script src="kendo.core.min.js"></script>
<script src="kendo.userevents.min.js"></script>
<script src="kendo.selectable.min.js"></script>
<script src="kendo.data.min.js"></script>
<script src="kendo.listview.min.js"></script>
<script src="kendo.popup.min.js"></script>
<script src="kendo.list.min.js"></script>
<script src="kendo.dropdownlist.min.js"></script>
<script src="kendo.upload.min.js"></script>
<script src="kendo.filebrowser.min.js"></script>
<script src="kendo.imagebrowser.min.js"></script>
<script src="kendo.combobox.min.js"></script>
<script src="kendo.draganddrop.min.js"></script>
<script src="kendo.window.min.js"></script>
<script src="kendo.color.min.js"></script>
<script src="kendo.slider.min.js"></script>
<script src="kendo.colorpicker.min.js"></script>
<script src="kendo.editor.min.js"></script>
<script src="kendo.toolbar.min.js"></script>
<script src="kendo.tooltip.min.js"></script>
<script src="kendo.multiselect.min.js"></script>
<script src="kendo.validator.min.js"></script>
<script src="kendo.aspnetmvc.min.js"></script>

By this :

<script src="kendo.all.min.js"></script>

It's working.

Do you have an idea of what I'm missing here ?

Regards,

Philippe

[Ianko]

Hi Philippe,

I am glad to see that everything worked out by using the kendo.all.min.js. 

However, I am not quite sure why you have the described issues with the custom build. I changed the Dojo sent by loading the scripts mentioned and still everything runs fine. You can test it here: http://dojo.telerik.com/EFoxA/2.

This might be related to the version you use. Check if using the CDN or upgrading the scripts would resolve that.

Regards,
Ianko
Telerik by Progress

 

 

[Philippe]

Hi Lanko,

I have the same mistake on your test. (kendo.listview.min.js:25 Uncaught TypeError: t.kendoEditable is not a function)

Try to create a folder and to set his name, you will see that it's not working.

I recreated the other bug event if I know how to avoid it.

On this example : http://dojo.telerik.com/EFoxA/6, if you are not scrolling you will see that the thumbnail are not displayed automatically when you open the window.

Regards,

Philippe

 

 

[Ianko]

Hi Philippe,

Thank you for pointing out how to reproduce the issue. 

The scripts that are responsible for the ListView editing are missing:

<script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.calendar.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.popup.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.datepicker.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.userevents.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.numerictextbox.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.validator.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.data.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.binder.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.editable.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.selectable.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.listview.min.js"></script>

You can check from here (http://www.telerik.com/download/custom-download) when selecting the editing and selecting for ListView that there are additional scripts needed.

Regards,
Ianko
Telerik by Progress

 

 

[Philippe]

Hi Lanko,

Well, Thank you.

When I selected Editor -> Image browser, listView has been selected automatically (see attach file), I thought it was enough.

Do you have an idea of the cause of the second issue ? (the thumbnail)

Regards,

Philippe

 

[Ianko]

Hello Philippe,

The problem is that Image Browser is initialized before the existence of the popup element of the Kendo Window. Therefore, the thumbnails are loaded after a proper repaint of the widget (on scroll).

You can resolve that by declaring the Image Browser during the dialog open. Like here:   http://dojo.telerik.com/EFoxA/8.

Regards,
Ianko
Telerik by Progress