Standalone kendoImageBrowser issue

[Carlo]

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?

 

[Danail Vasilev]

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

[Carlo]

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

 

[Danail Vasilev]

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