Handling Events with File Manager

Attaching Event Handler

The user can add any user-defined handler to any of the available events. To do this, the user can use the attachEvent method with the following parameters:

  • evName - name of the event;
  • evHandler - user-defined event handler.
webix.attachEvent(evName, evHandler);

Several handlers can be attached to one and the same event, and all of them will be executed. The names of the events are case-insensitive.

Detaching Event Handler

There is a simple way of removing an event-handler:

webix.detachEvent(id); // unique id of the event handler

Groups of Supported Events

The File Manager API includes the following groups of events:

1) Action Handling Events

2) Drag-n-drop Events

  • onAfterDrop - fires after drag-n-drop has been finished
  • onBeforeDrag - fires before drag-n-drop has started
  • onBeforeDragIn - fires before a dragged item is moved over the droppable area
  • onBeforeDrop - fires before a dragged item is released over the droppable area

3) Editing Events

4) Tree-related Events

5) Navigation Events

6) Other Events

Events' Details

onBeforeMarkCopy

fires before an item has been marked for copying

$$("fmanager").attachEvent("onBeforeMarkCopy", function(ids){
    // your code
    return true;
});

params:

  • ids - {string} the ids of the copied items

returns:

  • {bool}- returning false will prevent copying

Related sample:  Copy, Cut, Paste Events

onBeforeCreateFolder

fires before a new folder has been created

$$("fmanager").attachEvent("onBeforeCreateFolder",function(id){
    // your code
    return true;
});

params:

  • id - {string} the id of the target folder/file (where a new folder is going to be created)

returns:

  • {bool} - returning false will prevent creating

onBeforeMarkCut

fires before an item has been marked for cutting

$$("files").attachEvent("onBeforeMarkCut", function(ids){
    // your code
    return true;
});

params:

  • ids - {string} the ids of the copied items

returns:

  • {bool} - returning false will prevent cutting operation

Related sample:  Copy, Cut, Paste Events

onBeforeDeleteFile

fires before an item is deleted

$$("fmanager").attachEvent("onBeforeDeleteFile",function(id){
    // your code
    return true;
});

params:

  • id - {string} the id of the item to delete

returns:

  • {bool} - returning false will prevent deleting

onBeforeEditFile

fires when the Rename action is chosen in the popup menu

$$("fmanager").attachEvent("onBeforeEditFile",function(id){
    // your code 
    return true;
});

params:

  • id - {string} the id of the edited item

returns:

  • {bool} - if an event handler returns false, onBeforeEditFile handler will not be called.

Related sample:  Editing Events

onBeforePasteFile

fires before an item has been pasted

$$("fmanager").attachEvent("onBeforePasteFile", function(id){
    // your code
    return true;
});

params:

  • id - {string} the id of the target folder

returns:

  • {bool} - returning false will prevent pasting

Related sample:  Copy, Cut, Paste Events

onBeforeUploadFile

fires on "upload" action click

$$("fmanager").attachEvent("onBeforeUploadFile",function(targetId){
    // your code
    return true;
});

params:

  • targetId - {string} the id of the folder where a new file will be uploaded

returns:

  • {bool} - returning false will prevent opening the upload file dialog

onAfterDrop

fires after drag-n-drop has been finished

$$("fmanager").attachEvent("onAfterDrop",function(context,ev){
    // your code
    return true;
});

params:

  • context - {object} drag-n-drop context object with a set of properties:
    • from - the source object,
    • to - the target object,
    • source - the ID of the dragged item(s),
    • target - the ID of the drop target, null for drop on empty space,
    • start - the ID from which drag-n-drop started
  • ev - {event object} a native event object

Related sample:  DND Events in File Manager

onBeforeDrag

fires before drag-n-drop has started

$$("fmanager").attachEvent("onBeforeDrag",function(context,ev){
    // your code
    return true;
});

params:

  • context - {object} drag-n-drop context object with a set of properties:
    • from - the source object,
    • to - the target object,
    • source - the ID of the dragged item(s),
    • target - the ID of the drop target, null for drop on empty space,
    • start - the ID from which drag-n-drop started
  • ev - {event object} a native event object

returns:

  • {bool} - returning false will prevent dragging of the element

Related sample:  DND Events in File Manager

onBeforeDragIn

fires before a dragged item is moved over the droppable area

$$("fmanager").attachEvent("onBeforeDragIn",function(context,ev){
    // your code
    return true;
});

params:

  • context - {object} drag-n-drop context object with a set of properties:
    • from - the source object,
    • to - the target object,
    • source - the ID of the dragged item(s),
    • target - the ID of the drop target, null for drop on empty space,
    • start - the ID from which drag-n-drop started
  • ev - {event object} a native event object

returns:

  • {bool} - returning false will prevent dropping of the element

Related sample:  DND Events in File Manager

onBeforeDrop

fires before a dragged item is released over the droppable area

$$("fmanager").attachEvent("onBeforeDrop",function(context,ev){
    // your code
    return true;
});

params:

  • context - {object} drag-n-drop context object with a set of properties:
    • from - the source object,
    • to - the target object,
    • source - the ID of the dragged item(s),
    • target - the ID of the drop target, null for drop on empty space,
    • start - the ID from which drag-n-drop started
  • ev - {event object} a native event object

returns:

  • {bool} - returning false will prevent further drag-and-drop processing

Related sample:  DND Events in File Manager

onAfterEditStop

fires after the editor is closed

$$("fmanager").attachEvent("onAfterEditStop",function(id,state,editor,view){
    // your code
    return true;
});

params:

  • id - {string} the id of the edited item
  • state - {object} contains two properties:
    • old - the old value
    • value - a new value
  • editor - {object} editor object
  • view - {string} the view where editing occurs

Related sample:  Editing Events

onBeforeEditStop

fires before editing is finished

$$("fmanager").attachEvent("onBeforeEditStop",function(id,state,editor,view){
    var newValue = state.value
    if(...){
        return false;
    }
    return true;
});

params:

  • id - {string} the id of the edited item
  • state - {object} contains two properties:
    • old - the old value
    • value - a new value
  • editor - {object} editor object
  • view - {string} the view where editing occurs

returns:

  • {bool} - returning false will prevent editing

Related sample:  Editing Events

onErrorResponse

fires if an error has occurred during some operation

$$("files").attachEvent("onErrorResponse", function(requestData,response){
    var action = requestData.action;
    // your code
    return true;
});

params:

  • requestData - {object} the data sent with the request
  • response - {string} the server response

Related sample:  onErrorResponse Event

onBeforeRun

fires before a selected file is downloaded

$$("fmanager").attachEvent("onBeforeRun",function(id){
    webix.confirm({
        text:"Do you want to download this file?",
        ok:"Yes",
        cancel:"No",
        callback:function(result){
            if(result)
                $$("files").download(id);
        }
    });
    return false;
});

params:

  • id - {string} the id of the downloaded item

returns:

  • {bool} - if an event handler returns false, onBeforeRun handler will not be called.

Related sample:  onBeforeRun event

onFolderSelect

fires on selecting a folder in the Tree view

$$("fmanager").attachEvent("onFolderSelect",function(id){
    // your code
});

params:

  • id - {string} the id of the selected folder

Related sample:  Folder Selection

onViewInit

fires during the initialization of an object with the mode configuration

$$("fmanager").attachEvent("onViewInit": function(id, config){
    // disable multi-selection for "table" and "files" views
    if (id == "table" || id == "files"){
        config.select = true;
    }
});

params:

  • id - {string} the view id
  • config - {object} the object with view configuration

Related sample:  Changing View Configuration

onAfterHideTree

fires after the tree has been hidden

fmanager.attachEvent("onAfterHideTree", function(){
    // some code
});

onAfterLevelDown

fires after selection has been moved to the child folder

fmanager.attachEvent("onAfterLevelDown", function(id){
    // some code
});

params:

  • id - {string} the new selected folder id

onAfterRun

fires after a selected file has been downloaded

fmanager.attachEvent("onAfterRun",function(id){
    // some code
});

params:

  • id - {string} the id of the downloaded item

onAfterShowTree

fires after the tree has been shown

fmanager.attachEvent("onAfterShowTree", function(){
    // some code 
});

onBeforeHideTree

fires before the tree is hidden

fmanager.attachEvent("onBeforeHideTree", function(){
    // some code
    return true;
});

returns:

  • {bool} - returning false will prevent tree collapsing

onBeforeLevelDown

fires before selection is moved to the child folder

fmanager.attachEvent("onBeforeLevelDown", function(){
    // some code
});

params:

  • id - {string} the new selected folder id

returns:

  • {bool} - returning false will prevent the operation

onBeforeShowTree

fires before the tree is expanded

fmanager.attachEvent("onBeforeShowTree", function(){
    // some code
    return true;
});

returns:

  • {bool} - returning false will prevent tree expanding

onHideSearchResults

fires when search results were hidden

fmanager.attachEvent("onHideSearchResults", function(){
    // some code
});

onItemRename

fires when an item is renamed

fmanager.attachEvent("onItemRename", function (id) {
    // some code
});

params:

  • id - {string} the item id

onSuccessResponse

fires on successful save response

fmanager.attachEvent("onSuccessResponse", function(request, response){
    // your code here
});

params:

  • request - {object} a JSON object with request parameters
  • response - {object} a JSON object with response
Back to top