【結論】列ヘッダはそのまま、バインドだけ name_jpn ↔ name_eng に差し替えるのが最小手数。MultiRowは**layoutDefinition を差し替え**ればOK。
【要点】
-
DTOに
name_jpn/name_engを用意（他はそのまま）。 - Thymeleafで初期データ（JSON）と既定言語をJSへ埋め込み。
-
MultiRowは
itemsSourceを固定し、layoutDefinitionを関数化して名前列のbindingだけ切替。 -
UIはラジオボタン（日本語/English）。changeイベントで**
grid.layoutDefinition = …** を再設定。 - 余計な処理はナシ：並べ替え・複選などはデフォルトOFFのまま。
【例】
1) DTO（表示用・最小）
// 必要最小の表示用DTO
public record ItemDto(
Long id,
String code,
String name_jpn,
String name_eng,
String category,
Integer price
) {}
2) HTML（Thymeleaf + 最小UI）
<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>MultiRow 言語切替（最小）</title>
<link rel="stylesheet" href="/lib/wijmo/styles/wijmo.css">
<script src="/lib/wijmo/wijmo.min.js"></script>
<script src="/lib/wijmo/wijmo.grid.min.js"></script>
<script src="/lib/wijmo/wijmo.grid.multirow.min.js"></script>
<style>
.toolbar { display:flex; gap:1rem; align-items:center; margin:.5rem 0; }
#grid { height:520px; }
</style>
</head>
<body>
<div class="toolbar">
<label><input type="radio" name="lang" value="jpn" checked> 日本語</label>
<label><input type="radio" name="lang" value="eng"> English</label>
</div>
<div id="grid"></div>
<!-- 初期データ埋め込み -->
<script th:inline="javascript">
/*<![CDATA[*/
const items = /*[[${items}]]*/ []; // List<ItemDto> がJS配列に展開
const PAGE_SIZE = /*[[${pageSize}]]*/ 20; // 既定ページサイズ（任意）
/*]]>*/
</script>
<script>
(function () {
// 1) ページング（全件を画面側で分割）
const view = new wijmo.collections.CollectionView(items, { pageSize: PAGE_SIZE });
// 2) layoutDefinition を関数化：name列の binding だけ可変にする
function makeLayout(nameBinding /* 'name_jpn' or 'name_eng' */) {
return [
{ cells: [
{ binding: 'id', header: 'ID', width: 80 },
{ binding: 'code', header: 'コード', width: 140 },
{ binding: nameBinding, header: '名称', width: 260, colspan: 2 } // ←ここだけ可変
]},
{ cells: [
{ binding: 'category', header: 'カテゴリ', width: 160 },
{ binding: 'price', header: '価格', width: 120, format: 'n0', align: 'right' }
]}
];
}
// 3) MultiRow 本体：最初は日本語で表示
const grid = new wijmo.grid.multirow.MultiRow('#grid', {
itemsSource: view,
layoutDefinition: makeLayout('name_jpn'),
rowsPerItem: 2,
selectionMode: wijmo.grid.SelectionMode.Row,
allowSorting: false
});
// 4) ラジオボタンで binding を差し替え
document.querySelectorAll('input[name="lang"]').forEach(r => {
r.addEventListener('change', () => {
const bind = (r.value === 'eng') ? 'name_eng' : 'name_jpn';
grid.layoutDefinition = makeLayout(bind); // ← これだけで列の“中身”を衣替え
});
});
})();
</script>
</body>
</html>
参考：さらに簡素にしたいなら “列のbindingは常に
name” にして、ラジオ切替時に
items.forEach(it => it.name = it.name_jpn /*or name_eng*/); view.refresh();
とデータ側を上書きする手もあります（列定義はいじらない方式）。
【用語】
layoutDefinition＝MultiRowの列配置定義（複数行レイアウトの設計図）／binding＝列がデータ項目のどのフィールドを表示するかの指定
—