GRIDスタイルでonDX5ColumnDataDisplayingハンドラを使用する

説明

バージョン4.1.0.0から、カスタムカラムをさまざまな方法でGRIDスタイルで表示できるように、onDX5ColumnDataDisplayingイベントハンドラをサポートしています。

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") {
		// 'country'カラムの値を画像として表現します。
		return Object.assign(document.createElement("img"), {
			style: "max-height: 20px;",
			src: `${location.origin}/common/images/${columnValue}.svg`, title: columnValue 
		});
	}
}

country' カラムでは、'list' フォーマットを使用して、各略称の国名を出力します。しかし、onDX5ColumnDataDisplayingを使用することで、テキスト出力を回避し、国名の代わりに国旗画像を表示することができます。

戻り値がHTMLオブジェクトの場合、onDX5ColumnDataDisplayingはそのHTMLオブジェクトをアイテムのカラムにレンダリングします。また、文字列であっても、内部的にinnerHTMLプロパティを使用するため、HTMLタグを含む文字列であれば、HTMLオブジェクトであるかのようにレンダリングすることができます。

説明

예제