www.dextsolution.com
DEXTUPLOAD
X5
Reference > Events

## onDX5CompressWaitingBegin

- Version 1.3.0.0 or later

- Explanation

  The onDX5CompressWaitingBegin function is a callback function that is called at the start of a compressed download.

      function onDX5CompressWaitingBegin(id) {
          ...
      }

- Uses

      # Declare event handlers globally
      function onDX5CompressWaitingBegin(id) { ... }

      # Register event handlers at component creation time (3.10.0.0 version or later)
      dx5.create({
          ...
          events: {
              compressWaitingBegin: function(id) { ... }
          }
      });

- Parameters

  Name | Type | Explanation
  --- | --- | ---
  id | String | The component id of the event

## onDX5CompressWaitingCompleted

- Version 1.3.0.0 or later

- Explanation

  The onDX5CompressWaitingCompleted function is a callback function that is called when the compression operation is completed.

      function onDX5CompressWaitingCompleted(id) {
          ...
      }

- Uses

      # Declare event handlers globally
      function onDX5CompressWaitingCompleted(id) { ... }

      # Register event handlers at component creation time (3.10.0.0 version or later)
      dx5.create({
          ...
          events: {
              compressWaitingCompleted: function(id) { ... }
          }
      });

- Parameters

  Name | Type | Explanation
  --- | --- | ---
  id | String | The component id of the event

## onDX5CompressWaitingStopped

- Version 1.3.0.0 or later

- Explanation

  The onDX5CompressWaitingStopped function is a callback function that is called after a compression request is forced to stop.

      function onDX5CompressWaitingStopped(id) {
          ...
      }

  Even if the onDX5CompressWaitingStopped function is called when the compression process is finished and the target file is being downloaded, the download process is not canceled.

- Uses

      # Declare event handlers globally
      function onDX5CompressWaitingStopped(id) { ... }

      # Register event handlers at component creation time (3.10.0.0 version or later)
      dx5.create({
          ...
          events: {
              compressWaitingStopped: function(id) { ... }
          }
      });

- Parameters

  Name | Type | Explanation
  --- | --- | ---
  id | String | The component id of the event

## onDX5DragAndDrop

- Version 1.4.1.0 or later

- Explanation

  The onDX5DragAndDrop function is a callback function that is called when a file item is dropped when performing a drag-and-drop operation.

      function onDX5DragAndDrop(id) {
          ...
      }

  The onDX5DragAndDrop function occurs when an item is dropped, but can not be used to distinguish before and after adding an item, and is provided solely for the purpose of notifying that a drop action has taken place.

  After dropping, you need to use the onDX5ItemsAdded callback function to get additional information about the file.

- Uses

      # Declare event handlers globally
      function onDX5DragAndDrop(id) { ... }

      # Register event handlers at component creation time (3.10.0.0 version or later)
      dx5.create({
          ...
          events: {
              dragAndDrop: function(id) { ... }
          }
      });

- Parameters

  Name | Type | Explanation
  --- | --- | ---
  id | String | The component id of the event

## onDX5ColumnDataBinding

- Version 3.2.0.0 or later

- Explanation

  The onDX5ColumnDataBinding function is a callback function called to express the content to be displayed for each column in the GRID style.

  In the GRID style, the column displays the Metadata value of each item on the screen as it is. However, unlike virtual files, local files cannot use the meta attribute to set the Metadata at adding time.

  If you use the onDX5ColumnDataBinding function, you can express appropriately according to the Metadata status of an item.

      function onDX5ColumnDataBinding(id, itemId, columnKey, columnValue) {
          if (columnKey == "composer" && columnValue == null) return "Unknown";
          else if (columnKey == "country" && columnValue == null) return "Unknown";
      }

- Uses

      # Declare event handlers globally
      function onDX5ColumnDataBinding(id, itemId, columnKey, columnValue) { ... }

      # Register event handlers at component creation time (3.10.0.0 version or later)
      dx5.create({
          ...
          events: {
              columnDataBinding: function(id, itemId, columnKey, columnValue) { ... }
          }
      });

- Parameters

  Name | Type | Explanation
  --- | --- | ---
  id | String | The component id of the event
  itemId | String | The Unique id of the item
  columnKey | String | The name of the custom column(Metadata's name)
  columnValue | String | The value of the custom column(Metadata's value), or null if there is no value

## onDX5ColumnDataDisplaying

- Version 4.1.0.0 or later

- Explanation

  onDX5ColumnDataDisplaying is an event handler that is called to vary the output for each column in the GRID style.

  In the GRID style, columns can only display text or simple HTML code, but the onDX5ColumnDataDisplaying function allows you to vary the output of a column.

      // For the “movie” column, display the text in red color
      function onDX5ColumnDataDisplaying(id, itemId, columnKey, columnValue) {
          if (columnKey === "movie") {
              return `<span style='color: red;'>${columnValue}</span>`;
          }
      }

      // For an “action” column, create a button and fire an event on click
      function onDX5ColumnDataDisplaying(id, itemId, columnKey, columnValue) {
          if (columnKey === "action") {
              return Object.assign(document.createElement("button"), {
                  type: "button",
                  style: "padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px; background-color: #f8f8f8; color: #333; font-size: 11px; cursor: pointer;",
                  onclick: (ev) => {
                      echo(itemId);
                  },
                  textContent: "Echo"
              });
          }
      }

  Notes

  - The HTML elements that are rendered cannot use external CSS, so they must be set inline using the style attribute.
  - There is a 4px padding area to the left and right of the cell.
  - When you render the HTML input[type=text] element, you must disable the keyboard delete event using the setEnableDeletionByKey method. Otherwise, if the delete key is used in the input field, non-text items may be deleted.

- Uses

      # Declare the event handler globally
      function onDX5ColumnDataDisplaying(id, itemId, columnKey, columnValue) { ... }

      # register event handler at component creation time
      dx5.create({
          ...
          events: {
              columnDataDisplaying: function(id, itemId, columnKey, columnValue) { ... }
          }
      });

- Parameters

  Name | Type | Explanation
  --- | --- | ---
  id | String | The component id of the event
  itemId | String | The Unique id of the item
  columnKey | String | The name of the custom column(Metadata's name)
  columnValue | String | The value of the custom column(Metadata's value), or null if there is no value

- Return

  - If you don't need to change the output, don't return anything, or use only the return statement.
  - If you return text, the text is assumed to be an HTML string and is output.
  - Returning an HTML object renders the HTML to the cell.