DHTMLX Docs & Samples Explorer

Events Handling

List of supported events

The following events are available in dhtmlxGrid:

  • Drag-and-Drop Events:
    • onBeforeDrag - occurs when drag operation is started; the event can be blocked (dhtmlxgrid 1.5.1 +);
    • onDragIn/onDragOut - occur when an item is dragged to another potential target (the event can be blocked) or out of the potential target (dhtmlxgrid 1.5.1 +);
    • onDrag - occurs when an item is dragged to another target and the mouse is released, the event can be blocked;
    • onDrop - occurs when drag-and-drop operation is finished.
  • Editing Events:
    • onEditCell - occurs 1-3 times depending on cell's editability;
    • onRowDblClicked - occurs right after a row was double clicked, before a cell editor is opened by a dbl click. If retuns false, the event is canceled;
    • onCellChanged - occurs when a cell value was changed;
    • onCheckbox - the event is deprecated, use onCheck event instead; occurs after the state was changed;
    • onCheck - occurs after the state of a checkbox was changed;
    • onRowPaste - occurs for each row that was pasted from the clipboard (block selection extension);
  • Grid Reconstruction Events:
  • Loading Events:
    • onXLS - occurs before the request for a new XML was sent to the server;
    • onXLE - occurs simultaneously with ending XML of parsing, new items are already available in the grid;
    • onDynXLS - start of dynamic loading request;
    • onDistributedEnd - end of distributed parsing;
    • onSubGridCreated - occurs when creation of a sub-grid was initiated;
    • onSubGridLoaded- occurs after data from the sub-grid is loaded and parsed;
    • onSubAjaxLoad- occurs when sub-row-ajax cell loads its data
  • Moving Events:
  • Paging Events:
    • onBeforePageChanged - occurs before the active page in the grid was changed (paging extension);
    • onPageChanged - occurs after the active page in the grid was changed (paging extension);
    • onPaging - occurs each time when paging settings are changed (paging extension);
  • Resizing Events:
    • onResize - occurs on each resize iteration;
    • onResizeEnd - occurs when resizing of a column is finished;
  • Selection Events:
  • Sorting Events:
  • Context Menu Events:
    • onBeforeContextMenu - occurs immediately before showing the context menu;
    • onRightClick - occurs immediately after the right mouse button was clicked on a grid row;
  • Grouping
  • Filtering
    • onFilterStart - occurs when filtering is activated but before real filtering starts;
    • onFilterEnd - occurs when filtering is completed (filtering extension);
    • onCollectValues - occurs when values collected to fill select filter
  • Validation
  • Other Events:
    • onEnter - occurs immediately after the Enter key is pressed;
    • onStatReady - occurs when stat values were calculated;
    • onHeaderClick - occurs right after a header was clicked, before sorting or any other actions;
    • onKeyPress - occurs after a key was pressed but before the default key processing starts;
    • onTab - tabulation in grid occurs;
    • onMouseOver - occurs when the mouse is moved over a cell;
    • onScroll - occurs immediately after scrolling took place.
  • Inner events

Attaching/Removing Event Handler

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

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

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

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

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