imagebrowser identifier

[Ruben]

Dear Telerik Team,

I have a file structure that is stored in a database (folders, subfolders, items). The names of the directories and files are not unique, but each folder and file has a unique id. I've written a custom Read method for the imagebrowser, but I see that the javascript only sends the path, containing the directory names, when navigating in the image browser. Is there any way to make the imagebrowser send the id of the folder instead of the path.
I could put the id in the name field, but then this is the name the users see in the image browser (which is not what I want), is there a function I can set to show a different name?

Thanks

[Dimo]

Hello Ruben,

The ImageBrowser uses a Kendo UI DataSource instance to make requests and obtain the server response. As a result, you can define additional parameters to be sent via the read datasource request. This is documented at:

http://docs.telerik.com/kendo-ui/api/web/editor#configuration-imageBrowser.transport.read.data

Regards,
Dimo
Telerik

[Ruben]

Ok, that I understand. But how then can I get the ID of the selected folder? I am using a function as 'data' property as you suggested, but I don't want to send a hardcoded ID. Is there any function I can call on my editor to get the selected model (containing the id) in the imagebrowser or listen to an event when the selected folder is changed?

Thanks a lot

[Dimo]

Hello Ruben,

You can override the ImageBrowser's _dblClick internal method to obtain the ID of the folder, which will be opened, and pass it back to the server in the read request.

The following script should be executed before the ImageBrowser popup is opened. This can be before or after the Editor is created.

var oldDblClick = kendo.ui.ImageBrowser.prototype._dblClick;

kendo.ui.ImageBrowser.prototype._dblClick = function(e) {
   var li = $(e.currentTarget);

if (li.filter("[" + kendo.attr("type") + "=d]").length) {
    var folder = this.dataSource.getByUid(li.attr(kendo.attr("uid")));
    if (folder) {
        // "folder" is a Kendo UI Model instance
        // http://docs.telerik.com/kendo-ui/api/framework/model
        // obtain your custom folder ID from the model and assign it to a variable to be used in the function associated with transport.read.data
    }
}

   oldDblClick.call(this, e);
}

I suppose you are already sending your custom folder IDs via the read requests, so they are available on the client.

Regards,
Dimo
Telerik

[Stoyan]

Hello Dimo,

As mentioned  ImageBrowser uses a Kendo UI DataSource instance. Is it possible to use Shared DataSource?
As I am trying the following code and it works:

$('#imgBrowser').kendoImageBrowser({
    transport: {
        read: {},
        destroy: {},
        create: {},
        thumbnailUrl: function(path, name) {},
        uploadUrl: ""
    },
});

But the following does not:

var filesDataSource = new kendo.data.DataSource({
    transport: {
        read: {},
        destroy: {},
        create: {},
        thumbnailUrl: function(path, name) {},
        uploadUrl: ""
    }
});

$('#imgBrowser').kendoImageBrowser({
    dataSource: filesDataSource
});

I receive the following error "ReferenceError: uid is not defined"

[Dimo]

Hello Stoyan,

The ImageBrowser has no dataSource configuration property. From this point of view, unfortunately you can't assign a complete dataSource instance, no matter if it is shared or not.

Regards,
Dimo
Telerik