Use kendoImageBrowser as standalone.

8 posts, 1 answers
  1. Philippe
    Philippe avatar
    24 posts
    Member since:
    Sep 2009

    Posted 04 Jul Link to this post

    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.

     

  2. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 05 Jul Link to this post

    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.
     
  3. Kendo UI is VS 2017 Ready
  4. Philippe
    Philippe avatar
    24 posts
    Member since:
    Sep 2009

    Posted 05 Jul in reply to Ianko Link to this post

    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

  5. Answer
    Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 06 Jul Link to this post

    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.
     
  6. Philippe
    Philippe avatar
    24 posts
    Member since:
    Sep 2009

    Posted 06 Jul in reply to Ianko Link to this post

    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

     

     

  7. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 07 Jul Link to this post

    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.
     
  8. Philippe
    Philippe avatar
    24 posts
    Member since:
    Sep 2009

    Posted 07 Jul in reply to Ianko Link to this post

    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

     

  9. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 11 Jul Link to this post

    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.
     
Back to Top
Kendo UI is VS 2017 Ready