This is a migrated thread and some comments may be shown as answers.

Use kendoImageBrowser as standalone.

7 Answers 255 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Philippe
Top achievements
Rank 1
Philippe asked on 04 Jul 2016, 03:20 PM

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.

 

7 Answers, 1 is accepted

Sort by
0
Ianko
Telerik team
answered on 05 Jul 2016, 08:27 AM
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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Philippe
Top achievements
Rank 1
answered on 05 Jul 2016, 04:03 PM

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

0
Accepted
Ianko
Telerik team
answered on 06 Jul 2016, 06:05 AM
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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Philippe
Top achievements
Rank 1
answered on 06 Jul 2016, 07:58 AM

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

 

 

0
Ianko
Telerik team
answered on 07 Jul 2016, 11:06 AM
Hi Philippe,

Thank you for pointing out how to reproduce the issue. 

The scripts that are responsible for the ListView editing are missing:
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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Philippe
Top achievements
Rank 1
answered on 07 Jul 2016, 01:19 PM

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

 

0
Ianko
Telerik team
answered on 11 Jul 2016, 05:17 AM
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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
Tags
Editor
Asked by
Philippe
Top achievements
Rank 1
Answers by
Ianko
Telerik team
Philippe
Top achievements
Rank 1
Share this question
or