Standalone kendoImageBrowser issue

4 posts, 0 answers
  1. Carlo
    Carlo avatar
    2 posts
    Member since:
    Nov 2016

    Posted 02 Dec 2016 Link to this post

    Hi,

    i'm using kendoImageBrowser as a standalone widget.

    I get data from a server handler that returns a Json with file informations (filename,type, size) , while I would like to have a static thumbnail for every Item.

    This is the initialization for the widget :

     var objSchema = {
                   model: {
                       id: 'Id',
                       fields: {
                           name: { field: 'FileName' },
                           type: { field: 'FileType' },
                           size: { field: 'FileSize' }
                       }
                   }
               };
               $('#divBrowser').kendoImageBrowser({
                   fileTypes: '*.jpg,*.png',
                   transport: {
                       read: 'http://URL/Handler.ashx?PAR=A&PAR=B',
                       thumbnailUrl: function () { return 'http://URL/images/image.png'; }
                   },
                   schema: objSchema,
               });

    But thumbnails are not showed. Am I missing something?

     

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1502 posts

    Posted 06 Dec 2016 Link to this post

    Hello Carlo,

    You should implement a service that will fetch the images and the thumbnails. 

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

    Regards,
    Danail Vasilev
    Telerik by Progress
    Kendo UI is ready for Visual Studio 2017 RC! Learn more.
  3. Carlo
    Carlo avatar
    2 posts
    Member since:
    Nov 2016

    Posted 06 Dec 2016 Link to this post

    Hello Danail,

    thank you but I found that the issue was not in the way the thumbnails are provided but in the schema definition.

    My handler provided a file list to the transport.read with an its own structure and I used the schema definition to adapt it to the one requested by the widget. File names were showed correctly but thumbnails were not , so I suppose that there should be some issue with custom read schema. I changed how data are provided by the server handler and it works right.

    You can check this  example http://dojo.telerik.com/UgOjI  where I've changed the thumbnail source to a static image and it works without the need to build a "fake" service.

    I have another question :

    I would like to retrieve file information when user clicks on thumbnail . I registered to "change" event this way :

    change : function (e) {debugger;alert('change!'); },

    When user click on thumbnail event is fired and I'm looking into "e" object to find some useful data. I found that there is a "selected" property :

     

    selected:r
        dirty:false
    id:"Capture.PNG"
    name:"Capture.PNG"
    parent:()
    size:5533
    type:"f"
    uid:"e91077d0-5eca-4225-b208-985d6e9f95f3"

    This property has a field called "id" but it contains the same value as the "name" field. I thought that all these properties are filled with data received by the transport.read so I've changed the server handler to provide also the id field .. but it seems that widget ignore this information.

    How may I set this "Id" property? I need a place to store an identifier for the image.

    Thank you

     

  4. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1502 posts

    Posted 08 Dec 2016 Link to this post

    Hi Carlo,

    I wasn't able to reproduce the mentioned issue with the defined schema and the thumbnails. This is the schema I have used for the testing:
    var objSchema = {
        model: {
            id: 'Id',
            fields: {
                name: { field: 'name' },
                type: { field: 'type' },
                size: { field: 'size' }
            }
        }
    };

    Regarding getting the uid you can get it from the data-uid attribute of the element. You can get the element by its content. For example:
        change : function (e) {
        var fileName = this.value().substring(this.value().indexOf("=") + 1);
        var uid = $("li:contains('" + fileName + "')").attr('data-uid');
        alert('uid: ' + uid);
    }

    A fully runnable dojo on this regards is available here - http://dojo.telerik.com/iXoBa

    Regards,
    Danail Vasilev
    Telerik by Progress
    Kendo UI is ready for Visual Studio 2017 RC! Learn more.
Back to Top