www.dextsolution.com
DEXTUPLOAD
X5
Vue.js Reference > DEXTUploadX5(List/Tile/Single/Grid)

# DEXTUploadX5 Component Properties

## id

- dextuploadx5-vue 0.0.1 or later

- Type: String

- Description: The X5 instance id. If omitted, dext5 is used.

## type

- dextuploadx5-vue 0.0.1 or later

- Type: String

- Description: The X5 UI type. Use one of list, grid, tile, or single.

- DEXTUploadX5List, DEXTUploadX5Grid, DEXTUploadX5Tile, and DEXTUploadX5Single fix the type value internally.

## progressType

- dextuploadx5-vue 0.0.1 or later

- Type: String

- Description: Specifies the X5 progress dialog type. The default value is 0.

## path

- dextuploadx5-vue 0.0.1 or later

- Type: String

- Description: The path option passed to DX5.create(). If omitted, an empty string is used.

## waitingTime

- dextuploadx5-vue 0.0.1 or later

- Type: Number

- Description: The internal load waiting time when creating an X5 instance. The default value is 10000.

## lang

- dextuploadx5-vue 0.0.1 or later

- Type: String

- Description: The X5 language option. The default value is auto.

## hidden

- dextuploadx5-vue 0.0.1 or later

- Type: Boolean

- Description: When true, the X5 container is rendered hidden from the screen.

## columns

- dextuploadx5-vue 0.0.1 or later

- Type: Array

- Description: The column definition list used by the Grid type. It has no meaning for non-Grid types.

- Example

      <DEXTUploadX5Grid
        id="grid1"
        :columns="[
          { key: 'grade', display: 'Grade', width: 40, position: 2 },
          { key: 'movie', display: 'Movie', width: 80, position: 3 }
        ]"
      />

## ref

- dextuploadx5-vue 0.0.1 or later

- Description: When accessing the component instance through a Vue ref, module, ready, and wait() are available.

- wait() returns the X5 instance after it is ready.

## Events

- dextuploadx5-vue 0.0.1 or later

- Description: In Vue templates, event names are written in kebab-case.

- Event list

  @created, @error, @before-items-add, @item-adding, @items-added, @before-items-delete, @item-deleting, @items-deleted, @item-select, @item-check, @item-double-click, @upload-begin, @upload-item-start, @upload-item-end, @upload-stopped, @upload-completed, @download-begin, @download-item-start, @download-item-end, @download-stopped, @download-completed, @preview, @item-to-hd-finish, @column-data-binding, @column-data-displaying, @compress-waiting-begin, @compress-waiting-completed, @compress-waiting-stopped, @drag-and-drop

- Example

      <DEXTUploadX5List
        id="dext5"
        @created="handleCreated"
        @upload-completed="handleUploadCompleted"
        @error="handleError"
      />

- Handlers for @before-items-add, @item-adding, @before-items-delete, and @item-deleting can return false to cancel the X5 operation.

- Handlers for @column-data-binding and @column-data-displaying can return a value to pass it back to X5.