Documentation

Handling Events

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

List of supported events

The File Manager API includes the following groups of events:

1) Actions 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) Other

  • onErrorResponse - fires if an error has occured during some operation
  • onBeforeRun - fires on file double-click or on enter click
  • onFolderSelect - fires on selecting a folder in the Tree view
  • onViewInit - fires during the initialization of an object with the mode configuration

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 created item

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(ids){
    // your code
    return true;
});

params:

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

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 an folder where an 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 DnD started
  • ev - {event object} a native event object

Related sample:  Drag-N-Drop

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 DnD started
  • ev - {event object} a native event object

returns:

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

Related sample:  Drag-N-Drop

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 DnD started
  • ev - {event object} a native event object

returns:

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

Related sample:  Drag-N-Drop

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 DnD started
  • ev - {event object} a native event object

returns:

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

Related sample:  Drag-N-Drop

onAfterEditStop

fires after the edtor 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 occured 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

Back to top