Explanation
To help you present custom columns in a GRID style in different ways, starting with version 4.1.0.0, we support the onDX5ColumnDataDisplaying event handler.
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: "xx" }
]
});
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" } }
]);
function onDX5ColumnDataDisplaying(id, itemId, columnKey, columnValue) {
if (columnKey === "country") {
// Represent the value of the 'country' column as an image.
return Object.assign(document.createElement("img"), {
style: "max-height: 20px;",
src: `${location.origin}/common/images/${columnValue}.svg`, title: columnValue
});
}
}
The 'country' column uses the 'list' format to output the country name for each abbreviation. However, by using onDX5ColumnDataDisplaying, you can bypass the textual output and display the flag image instead of the country name.
If the return value is an HTML object, onDX5ColumnDataDisplaying renders that HTML object in the column of the item. In addition, even if it is a string, it uses the innerHTML property internally, so if it is a string with HTML tags, it can be rendered as if it were an HTML object.
예제