Readonly folders for file and image browser

2 posts, 1 answers
  1. Abram
    Abram avatar
    4 posts
    Member since:
    Feb 2013

    Posted 26 Aug 2014 Link to this post

    I would like to have some top level folders in the file and image browser inside the editor to be read-only not allowing a user to rename, delete, and add items to the root folder. I want a user to be able to navigate to some predefined folders under the root folder and to be able to modify the contents under them.  This isn't my structure but an example would be to have folders <website>/UserXFiles/HiRes & <website>/UserXFiles/thumbnail and only allow a user to be able to modify the contents in the HiRes and thumbnail folders but nothing above (still need the user to navigate to the different folders).  Is there functionality built into the browsers to achieve this?

    Also is there a way to initialize the browsers to a directory:  If my structure was like the one above how would I start the user inside the Files folder?

    Thank you,
  2. Answer
    Dimo avatar
    8404 posts

    Posted 28 Aug 2014 Link to this post

    Hi Abram,

    The File and Image Browsers do not have a notion of read-only folders, but the desired behavior can be achieved with custom coding. You can use the following:

    + the dataBound event of the Kendo UI ListView, which is internally used by the two Browsers
    + the internal _path property of the Browsers.
    + the ".k-toolbar-wrap" element inside the Browsers, which contains the Upload, New Folder and Delete buttons (there is no rename functionality).

    You can make the following test:

    1. Go to:

    2. Open the ImageBrowser and create a new folder.

    3. Close the ImageBrowser.

    4. Execute the following in the browser's Javascript console:

    var editor = $("#editor").data("kendoEditor");
          var imageBrowser = $(".k-imagebrowser").data("kendoImageBrowser");
          imageBrowser.listView.bind("dataBound", function(e){
             if (imageBrowser._path == "/") {
             } else {

    5. Open the ImageBrowser. The root folder is read-only.

    6. Navigate to the folder you created in step 2. It is not read-only.


    With regard to your second question, the File and Image Browsers are always initialized to some directory, which is treated as a root directory. This depends entirely on your server-side implementation. In case you want the default directory, which is shown to the user, to not be the root directory, you can navigate manually via:

    var imageBrowser = $(".k-imagebrowser").data("kendoImageBrowser");
    imageBrowser.path("New folder/");
    imageBrowser.breadcrumbs.value("New folder/");

    (Keep in mind that the reference to the File and Image Browsers is not available on initial page load. Use the approach shown above).


    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top