imagebrowser identifier

6 posts, 0 answers
  1. Ruben
    Ruben avatar
    2 posts
    Member since:
    Feb 2014

    Posted 07 Feb 2014 Link to this post

    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
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 11 Feb 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Ruben
    Ruben avatar
    2 posts
    Member since:
    Feb 2014

    Posted 20 Feb 2014 Link to this post

    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
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 24 Feb 2014 Link to this post

    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
            // 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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Stoyan
    Stoyan avatar
    9 posts
    Member since:
    Jan 2015

    Posted 07 Jan 2015 in reply to Dimo Link to this post

    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"
  7. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 07 Jan 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready