Setting custom columns in GRID style

Explanation

GRID style components can be created by setting the 'style' property to 'grid' when creating a component using the 'dx5.create' function.

The GRID style has the same GUI as the LIST, and it supports creating additional custom columns.

Custom columns are given their own key, which is the same as the meta-data name of each file item, and can be set by using meta-data.

'name, size, op' are strings that cannot be used as key values.

// Creating custom columns of type 'text'
dx.createColumn({ key: "composer", display: "Composer", width: 80, position: 2 });
// Creating custom columns of type 'list'
dx.createColumn({ key: "country", display: "Country", width: 80, position: 3, type: "list", items: [
        { display: "Austria", value: "AT" },
        { display: "Germany", value: "DE" },
        { display: "Italy", value: "IT" },
        { display: "Russia", value: "RU" },
        { display: "Etc.", value: "NN" }
    ]
});

// Meta-data can be registered using the 'meta' property.
dx.addVirtualFileList([
	{ ..., name: "Destiny.mp3", ..., meta: { "composer": "Austria", "country": "DE" } },
	{ ..., name: "Jupiter.mp3", ..., meta: { "composer": "Mozart", "country": "AT" } },
	{ ..., name: "Unfinished Symphony.mp3", ..., meta: { "composer": "Schubert", "country": "AT" } },
	{ ..., name: "Pathetic .mp3", ..., meta: { "composer": "Tschaikovsky", "country": "RU" } },
	{ ..., name: "The Four Seasons.mp3", ..., meta: { "composer": "Vivaldi", "country": "IT" } }
]);

Custom columns of the type 'list' are not UI components like drop-down lists.

Example

Add custom columns

Custom columns can be created using the 'createColumn' method. This method should be called prior to adding items.

There are two types of custom column types,'text, list', and in the example, only the'text' type is introduced.

The key of the file column is'name', the key of the size column is'size', and the key of the status column is'op'.

If the key names are the same, the existing settings will be overwritten. However,'name, size, op' cannot be overridden.

Key
Header text
Width(pixel)
Position(from 2)
Header alignment
Item alignment

Internet Explorer browsers can only display text as column values.

Setting the value of a custom column is the same as using meta-data.

When registering virtual files with addVirtualFile and addVirtualFileList, meta-data can be set by using the'meta' property.

In the case of a local file, the 'meta' property cannot be used at the time of registration, so it must be manually set (virtual files are also possible) using methods such as 'setMetaDataByIndex' and 'setMetaDataById'. If you want to register a local file and set a custom column value at the same time, you can use an event handler called 'onDX5ColumnDataBinding'. (Refer to the source for details.)

Show/hide/delete

The file(name) column cannot be hidden, and the size(size) and status(op) columns can be hidden.

File(name), size(size), and status(op) columns cannot be deleted.

key