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

Standalone kendoImageBrowser issue

3 Answers 20 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Carlo
Top achievements
Rank 1
Carlo asked on 02 Dec 2016, 09:13 AM

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?

 

3 Answers, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 06 Dec 2016, 07:35 AM
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.
0
Carlo
Top achievements
Rank 1
answered on 06 Dec 2016, 09:47 AM

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

 

0
Danail Vasilev
Telerik team
answered on 08 Dec 2016, 10:13 AM
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.
Tags
Editor
Asked by
Carlo
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Carlo
Top achievements
Rank 1
Share this question
or