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

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

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

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

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

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

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.