JavaScript/Wijmo

Wijmo転置グリッドのデータ編集をスムーズに！カスタムエディタの使い方

by MESCIUS-dev

2026年8月5日にリリースされた「Wijmo（ウィジモ）」の最新バージョン「2026J v1.1」では、標準的なグリッドの行と列を入れ替えて表示できる「TransposedGrid（転置グリッド）」、および「TransposedMultiRow（転置複数行グリッド）」が、セル編集にコンボボックスや日付入力といったWijmoの入力コントロールを使用できる「カスタムエディタ機能」に対応しました。

本記事では、「転置グリッド」と「カスタムエディタ」がどのような機能かを簡単にご紹介した後、転置グリッドでカスタムエディタを利用する際の具体的な実装方法についてサンプルプログラムを使って解説します。

転置グリッドとは

「TransposedGrid（転置グリッド）」は、標準的なグリッドの行と列を入れ替えて表示できるグリッドで、過去にお客様からのご要望を受けて追加された機能です。
Wijmoの主要なグリッドコントロールであるFlexGridでは、データを行として縦方向に、項目を列として横方向に並べますが、TransposedGridの場合はこれを転置して、データを列として横方向に、項目を行として縦方向に並べます。

グリッドのデータの並ぶ向き

転置グリッドは、以下のようなケースで力を発揮します。

  • データ毎に表示する項目の数が多い
  • データを比較しながら確認したい
  • 比較対象となるデータ数が少ない

以下は、項目の数が多いデータをFlexGridとTransposedGridを用いて表示した結果です。

FlexGrid

今回のように項目が多いデータでは列が表示範囲に収まらず、複数の項目を確認したい場合に度々スクロール操作をする必要があります。

TransposedGrid（転置グリッド）

TransposedGrid（転置グリッド）

項目の数が多い場合においても、項目を縦に並べることでより多くの項目を一度に確認できます。また、データを比較する際も、各データの項目が横方向に連続して並んでいるため比較しやすいです。

なお、以下の記事では、TransposedGridの基本的な使い方を、FlexGridと比較しながら解説していますので、ぜひこちらもご参照ください。

カスタムエディタとは

「カスタムエディタ」とは、セル編集にWijmoの入力コントロールを使用できる機能です。
たとえば、日付の値を入力する際にカレンダー形式で選択できるようにする、候補をドロップダウンリストに表示して選択できるようにする、といったことが可能です。カスタムエディタを利用することで、入力効率の向上や設定ミスの防止に繋がります。

カスタムエディタとして使用できるWijmoの入力コントロールは、以下の9種類です。

Wijmo入力コントロール イメージ 機能
ComboBox コンボボックス ドロップダウンリストから候補を選択して入力できます。
MultiSelect 複数選択 ドロップダウンリストから複数の項目を選択して入力できます。
AutoComplete オートコンプリート 入力内容に応じて候補を絞り込み、表示された候補から選択して入力できます。
InputDate 日付入力 カレンダーから日付を選択して入力できます。
InputTime 時刻入力 時刻をリストから選択して入力できます。
InputDateTime 日付時刻入力 カレンダーおよび時刻リストから日時を選択して入力できます。
InputMask マスク入力 あらかじめ定義した入力形式に沿って値を入力できます。
InputNumber 数値入力 数値入力で範囲を制御したり、ボタン操作で値を変更したりできます。
InputColor 色入力 カラーパレットから色を選択して入力できます。

なお、利用方法は以下のようにグリッドの列（転置グリッドの場合は行）のeditorプロパティに入力コントロールのインスタンスを設定するのみです。

columns: [
    ・・・
	{
	    binding: 'department',
	    header: '管理部門',
	    editor: new wijmo.input.ComboBox(document.createElement('div'), { itemsSource: departments }), 
	},
    ・・・
],

これまでカスタムエディタはFlexGrid、MultiRow、FlexSheetで利用可能でしたが、バージョン2026J v1.1では、複数のお客様からのご要望を受け、TransposedGrid（転置グリッド）およびTransposedMultiRow（転置複数行グリッド）でも利用できるようになりました。
先にご紹介した通り、転置グリッド自体もお客様からのご要望を受け追加された機能です。このようにWijmoでは実際の業務システム開発の現場から寄せられる要望を取り入れながら機能強化を続けています。

転置グリッドでカスタムエディタを使ってみる

それでは、ここからは実際に転置グリッドを作成し、各行に対してカスタムエディタを設定する方法について解説していきます。

開発環境の準備

この記事では以下の開発環境を使用します。

今回作成するファイルは次の4つです。

index.htmlページ本体。要素としてTransposedGridを配置します
scripts/app.jsTransposedGridを作成するコードを記載します
scripts/data.jsTransposedGridに連結するデータを記載します
css/styles.cssこのサンプルで使用する各要素のスタイルを設定するコードを記載します

Wijmoの参照設定

WijmoのTransposedGridコントロールと、カスタムエディタとして設定する入力コントロールを使用するには、専用のモジュールを環境にインストールする必要があります。CDNを参照したり、npmなどから入手したりする方法もありますが、今回は環境に直接モジュールを配置していきます。あらかじめWijmoの製品版かトライアル版をご用意ください。トライアル版は以下より無償で入手可能です。

製品版、またはトライアル版をダウンロードしたら、ZIPファイルを解凍し、以下のファイルを環境にコピーします。

  • scripts/wijmo.grid.min.js
  • scripts/wijmo.grid.transposed.min.js
  • scripts/wijmo.grid.transposedmultirow.min.js
  • scripts/wijmo.input.min.js
  • scripts/wijmo.min.js
  • scripts/cultures/wijmo.culture.ja.min.js
  • css/wijmo.min.css

※ なお、npmを使ってWijmoの参照を行う場合は、ヘルプの「特定のパッケージをインストールする」に記載しているように、wijmo.grid.transposedパッケージに対してinstallコマンドを実行するだけでwijmo.grid.transposedが依存するパッケージも自動的にインストールされます。

転置グリッドを生成する

それでは、最初にベースとなる画面を作成していきます。前述のWijmoモジュールと「app.js」、「data.js」、「styles.css」への参照設定をHTMLファイルに追加します。
※ CDNから参照する場合はコメントアウトされている部分とライブラリの参照先を入れ替えてください。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>転置グリッドでカスタムエディタを利用する</title>

    <!-- ローカルのライブラリを参照する場合 -->
    <link rel="stylesheet" href="css/wijmo.min.css" />
    <script src="scripts/wijmo.min.js"></script>
    <script src="scripts/wijmo.grid.min.js"></script>
    <script src="scripts/wijmo.grid.transposed.min.js"></script>
    <script src="scripts/wijmo.input.min.js"></script>
    <script src="scripts/cultures/wijmo.culture.ja.min.js"></script>

    <!-- CDNからライブラリを参照する場合 -->
    <!-- <link rel="stylesheet" href="https://cdn.mescius.com/wijmo/5.20261.52/styles/wijmo.min.css" />
    <script src="https://cdn.mescius.com/wijmo/5.20261.52/controls/wijmo.min.js"></script>
    <script src="https://cdn.mescius.com/wijmo/5.20261.52/controls/wijmo.grid.min.js"></script>
    <script src="https://cdn.mescius.com/wijmo/5.20261.52/controls/wijmo.grid.transposed.min.js"></script>
    <script src="https://cdn.mescius.com/wijmo/5.20261.52/controls/wijmo.input.min.js"></script>
    <script src="https://cdn.mescius.com/wijmo/5.20261.52/controls/cultures/wijmo.culture.ja.min.js"></script> -->

    <link rel="stylesheet" href="css/styles.css">
    <script src="scripts/app.js"></script>
    <script src="scripts/data.js"></script>
</head>

<body>
    <div id="theGrid"></div>
</body>

</html>

続いて「app.js」と「data.js」を次のように作成し、TransposedGridを生成します。
TransposedGridはFlexGridを拡張したコントロールであるため、FlexGridと同じ要領で設定できます。ただし、行と列の役割が入れ替わっているため、設定するプロパティの名前が異なる点にご注意ください。FlexGridではcolumnsプロパティに表示する項目やヘッダー文字列などの情報を設定しますが、TransposedGridの場合はrowsプロパティに同様の情報を設定します。
※ ライセンスキーを設定しない場合トライアル版を示すメッセージが表示されます。ライセンスキーの入手や設定方法についてはこちらをご覧ください。

wijmo.setLicenseKey('ここにWijmoのライセンスキーを設定します');

document.readyState === 'complete' ? init() : window.onload = init;
function init() {

    const grid = new wijmo.grid.transposed.TransposedGrid('#theGrid', {
        itemsSource: data,
        autoGenerateRows: false,
        alternatingRowStep: 0,
        headersVisibility: 'Row',
        showSelectedHeaders: 'Row',
        showMarquee: true,
        autoRowHeights: true,
        rows: [
            {
                binding: 'hostName',
                header: 'ホスト名',
            },
            {
                binding: 'status',
                header: '状態',
            },
            {
                binding: 'role',
                header: '用途',
            },
            {
                binding: 'lastBackup',
                header: '最終バックアップ',
                format: 'yyyy/M/d H:mm',
                wordWrap: true,
            },
            {
                binding: 'location',
                header: '設置場所',
                wordWrap: true,
            },
            {
                binding: 'department',
                header: '管理部門',
            },
            {
                binding: 'owner',
                header: '管理者',
            },
            {
                binding: 'assetNumber',
                header: '資産管理番号',
            },
            {
                binding: 'maintenanceExpiry',
                header: '保守満了日',
                format: 'yyyy/M/d',
            },
            {
                binding: 'osVersion',
                header: 'OS',
                wordWrap: true,
            },
            {
                binding: 'cpuCores',
                header: 'CPU',
                align: 'left',
            },
            {
                binding: 'memoryGb',
                header: 'メモリ',
                align: 'left',
            },
            {
                binding: 'storageGb',
                header: 'ストレージ',
                align: 'left',
            },
        ],
    });

    grid.columns.defaultSize = 160;
}
// データ
const data = [
  {
    hostName: 'SRV-WEB-01',
    status: '稼働中',
    role: ['Web', 'AP'],
    lastBackup: new Date(2026, 7, 26, 2, 0),
    location: 'サーバールーム1 ラックA-01',
    department: '情報システム部',
    owner: '山田 太郎',
    assetNumber: 'HW-202304-118',
    maintenanceExpiry: new Date(2028, 5, 30),
    osVersion: 'Windows Server 2022',
    cpuCores: '8コア',
    memoryGb: '32GB',
    storageGb: '500GB',
  },
  {
    hostName: 'SRV-DB-01',
    status: '障害対応中',
    role: ['DB'],
    lastBackup: new Date(2026, 7, 25, 3, 0),
    location: 'サーバールーム1 ラックA-02',
    department: '情報システム部',
    owner: '鈴木 花子',
    assetNumber: 'HW-202402-063',
    maintenanceExpiry: new Date(2029, 2, 31),
    osVersion: 'Windows Server 2022',
    cpuCores: '16コア',
    memoryGb: '64GB',
    storageGb: '2,000GB',
  },
  {
    hostName: 'SRV-MON-01',
    status: '稼働中',
    role: ['監視', 'ログ'],
    lastBackup: new Date(2026, 7, 26, 2, 30),
    location: 'サーバールーム1 ラックB-01',
    department: 'セキュリティ推進室',
    owner: '佐藤 次郎',
    assetNumber: 'HW-202409-247',
    maintenanceExpiry: new Date(2029, 11, 31),
    osVersion: 'Windows Server 2022',
    cpuCores: '8コア',
    memoryGb: '32GB',
    storageGb: '4,000GB',
  },
  {
    hostName: 'SRV-AUTH-01',
    status: 'メンテナンス中',
    role: ['認証'],
    lastBackup: new Date(2026, 7, 26, 0, 0),
    location: 'サーバールーム2 ラックC-01',
    department: '情報システム部',
    owner: '田中 良子',
    assetNumber: 'HW-202501-092',
    maintenanceExpiry: new Date(2030, 2, 31),
    osVersion: 'Windows Server 2025',
    cpuCores: '4コア',
    memoryGb: '16GB',
    storageGb: '250GB',
  },
];

「styles.css」では各種要素のスタイルを定義します。

/* グリッドのスタイル */
#theGrid {
    border: 1px solid gray;
    inline-size: 810px;
}

/* その他の要素のスタイル */
html {
    font-family: Meiryo;
}

この状態でサンプルを実行すると、以下のようにデータ設定されたTransposedGridが表示されます。

TransposedGrid（転置グリッド）カスタムエディタ適用前

カスタムエディタを設定する

TransposedGridでカスタムエディタを使用するには、行（Rowクラス）のeditorプロパティにWijmo入力コントロールのインスタンスを設定します。今回はサンプルデータに合わせて、以下のように6種類の入力コントロールを使用します。

Wijmo入力コントロール使用している行
ComboBox状態、管理部門
MultiSelect用途
AutoComplete設置場所
InputDateTime最終バックアップ
InputDate保守満了日
InputMask資産管理番号

それでは、「app.js」と「data.js」にコードを追加しましょう。以下のハイライト表示された部分が今回追加するコードです。

・・・（中略）・・・

const grid = new wijmo.grid.transposed.TransposedGrid('#theGrid', {
    ・・・（中略）・・・
    rows: [
        {
            binding: 'hostName',
            header: 'ホスト名',
        },
        {
            binding: 'status',
            header: '状態',
            editor: new wijmo.input.ComboBox(document.createElement('div'), { itemsSource: statuses })
        },
        {
            binding: 'role',
            header: '用途',
            editor: new wijmo.input.MultiSelect(document.createElement('div'), { itemsSource: roles })
        },
        {
            binding: 'lastBackup',
            header: '最終バックアップ',
            format: 'yyyy/M/d H:mm',
            wordWrap: true,
            editor: new wijmo.input.InputDateTime(document.createElement('div'), { format: 'yyyy/M/d HH:mm', timeStep: 30 }),
        },
        {
            binding: 'location',
            header: '設置場所',
            wordWrap: true,
            editor: new wijmo.input.AutoComplete(document.createElement('div'), {
                itemsSource: locations,
                isEditable: false,
                minLength: 1,
                searchDuringComposition: true,
            }),
        },
        {
            binding: 'department',
            header: '管理部門',
            editor: new wijmo.input.ComboBox(document.createElement('div'), { itemsSource: departments }),
        },
        {
            binding: 'owner',
            header: '管理者',
        },
        {
            binding: 'assetNumber',
            header: '資産管理番号',
            editor: new wijmo.input.InputMask(document.createElement('div'), { mask: '>LL-000000-000', promptChar: '*' }),
        },
        {
            binding: 'maintenanceExpiry',
            header: '保守満了日',
            format: 'yyyy/M/d',
            editor: new wijmo.input.InputDate(document.createElement('div'), { format: 'yyyy/M/d' }),
        },
        {
            binding: 'osVersion',
            header: 'OS',
            wordWrap: true,
        },
        {
            binding: 'cpuCores',
            header: 'CPU',
            align: 'left',
        },
        {
            binding: 'memoryGb',
            header: 'メモリ',
            align: 'left',
        },
        {
            binding: 'storageGb',
            header: 'ストレージ',
            align: 'left',
        },
    ],
});
・・・（中略）・・・

// 入力コントロール用データ
const roles = ['Web', 'AP', 'DB', 'ファイル', 'メール', '認証', '監視', 'ログ', 'バッチ処理', 'テスト'];
const statuses = ['稼働中', 'メンテナンス中', '障害対応中', '停止中', '廃棄予定'];
const locations = [
  'サーバールーム1 ラックA-01',
  'サーバールーム1 ラックA-02',
  'サーバールーム1 ラックB-01',
  'サーバールーム1 ラックB-02',
  'サーバールーム1 ラックB-03',
  'サーバールーム2 ラックC-01',
  'サーバールーム2 ラックC-02',
  'サーバールーム2 ラックD-01',
];
const departments = ['情報システム部', 'セキュリティ推進室', '開発部'];

実行すると、以下のように各項目の編集において、Wijmo入力コントロールを使用できるようになります。

今回のサンプルデータであるサーバー管理情報は表示項目が多くなりがちですが、全項目を一目で確認することができ、他のサーバーとも見比べやすくなっているかと思います。これに加えて、カスタムエディタを利用することで、データの編集もスムーズに行えるようになりました。

複数行転置グリッドにする

カスタムエディタは転置グリッドだけでなく、複数行転置グリッド（TransposedMultiRow）でも利用可能です。複数行転置グリッドは、ある行に複数の項目を配置することができ、1つのデータを複数列で表示することが可能です。
ここまでに作成した転置グリッドでもデータが見やすい状態ですが、「CPU」と「メモリ」の行を1行にまとめてみましょう。

まず、「index.html」をTransposedMultiRowの使用に必要なモジュールを参照するように変更します。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>転置グリッドでカスタムエディタを利用する</title>

    <!-- ローカルのライブラリを参照する場合 -->
    <link rel="stylesheet" href="css/wijmo.min.css" />
    <script src="scripts/wijmo.min.js"></script>
    <script src="scripts/wijmo.grid.min.js"></script>
    <script src="scripts/wijmo.grid.transposedmultirow.min.js"></script>
    <script src="scripts/wijmo.input.min.js"></script>
    <script src="scripts/cultures/wijmo.culture.ja.min.js"></script>

    <!-- CDNからライブラリを参照する場合 -->
    <!-- <link rel="stylesheet" href="https://cdn.mescius.com/wijmo/5.20261.52/styles/wijmo.min.css" />
    <script src="https://cdn.mescius.com/wijmo/5.20261.52/controls/wijmo.min.js"></script>
    <script src="https://cdn.mescius.com/wijmo/5.20261.52/controls/wijmo.grid.min.js"></script>
    <script src="https://cdn.mescius.com/wijmo/5.20261.52/controls/wijmo.grid.transposedmultirow.min.js"></script>
    <script src="https://cdn.mescius.com/wijmo/5.20261.52/controls/wijmo.input.min.js"></script>
    <script src="https://cdn.mescius.com/wijmo/5.20261.52/controls/cultures/wijmo.culture.ja.min.js"></script> -->

    <link rel="stylesheet" href="css/styles.css">
    <script src="scripts/app.js"></script>
    <script src="scripts/data.js"></script>
</head>

<body>
    <div id="theGrid"></div>
</body>

</html>

次に、「app.js」でTransposedGridを生成している箇所をTransposedMultiRowを生成するように変更しましょう。ハイライト表示されたコードが変更する箇所です。
TransposedGridでは表示する項目やヘッダー文字列などの情報をrowsプロパティに設定していましたが、TransposedMultiRowではレイアウト定義を担うlayoutDefinitionプロパティのcellsに設定します。

・・・（中略）・・・
    
const grid = new wijmo.grid.transposedmultirow.TransposedMultiRow('#theGrid', {
    itemsSource: data,
    // autoGenerateRows: false,// TransposedMultiRowには無いプロパティ
    alternatingRowStep: 0,
    headersVisibility: 'Row',
    showSelectedHeaders: 'Row',
    showMarquee: true,
    autoRowHeights: true,
    layoutDefinition: [
        {
            cells: [{
                binding: 'hostName',
                header: 'ホスト名',
            }]
        },
        {
            cells: [{
                binding: 'status',
                header: '状態',
                editor: new wijmo.input.ComboBox(document.createElement('div'), { itemsSource: statuses })
            }]
        },
        {
            cells: [{
                binding: 'role',
                header: '用途',
                editor: new wijmo.input.MultiSelect(document.createElement('div'), { itemsSource: roles })
            }]
        },
        {
            cells: [{
                binding: 'lastBackup',
                header: '最終バックアップ',
                format: 'yyyy/M/d H:mm',
                wordWrap: true,
                editor: new wijmo.input.InputDateTime(document.createElement('div'), { format: 'yyyy/M/d HH:mm', timeStep: 30 }),
            }]
        },
        {
            cells: [{
                binding: 'location',
                header: '設置場所',
                wordWrap: true,
                editor: new wijmo.input.AutoComplete(document.createElement('div'), {
                    itemsSource: locations,
                    isEditable: false,
                    minLength: 1,
                    searchDuringComposition: true,
                }),
            }]
        },
        {
            cells: [{
                binding: 'department',
                header: '管理部門',
                editor: new wijmo.input.ComboBox(document.createElement('div'), { itemsSource: departments }),
            }]
        },
        {
            cells: [{
                binding: 'owner',
                header: '管理者',
            }]
        },
        {
            cells: [{
                binding: 'assetNumber',
                header: '資産管理番号',
                editor: new wijmo.input.InputMask(document.createElement('div'), { mask: '>LL-000000-000', promptChar: '*' }),
            }]
        },
        {
            cells: [{
                binding: 'maintenanceExpiry',
                header: '保守満了日',
                format: 'yyyy/M/d',
                editor: new wijmo.input.InputDate(document.createElement('div'), { format: 'yyyy/M/d' }),
            }]
        },
        {
            cells: [{
                binding: 'osVersion',
                header: 'OS',
                wordWrap: true,
            }]
        },
        {
            header: 'スペック', colspan: 2, cells: [
                {
                    binding: 'cpuCores',
                    header: 'CPU',
                    align: 'left',
                },
                {
                    binding: 'memoryGb',
                    header: 'メモリ',
                    align: 'left',
                },
                {
                    binding: 'storageGb',
                    header: 'ストレージ',
                    align: 'left',
                },
            ]
        }
    ],
});

grid.columns.defaultSize = 80;
grid.autoSizeColumns(null, null, true, 0);

サンプルを実行すると、「CPU」と「メモリ」が同じ行に表示されます。

TransposedMultirow（複数行転置グリッド）

今回ご紹介した内容については以下のデモアプリケーションで確認できます（“Run Project”をクリックするとデモが起動します）。

さいごに

今回はWijmoの転置グリッドについて、カスタムエディタを利用してよりスムーズに編集できるようにする方法をご紹介しました。

カスタムエディタを利用することで、セル編集における入力効率の向上や設定ミスの防止が期待でき、編集を要するデータにおいても転置グリッドを活用しやすくなります。

Wijmoでは、定番のFlexGridだけでなく、今回ご紹介したTransposedGridなど、多様なデータグリッドを提供しています。条件に合わせてご活用いただくことで、より使いやすいアプリケーションの開発の一助となれましたら幸いです。

なお、製品サイトで公開している以下のデモアプリケーションでも、転置グリッドでカスタムエディタを実装する例がご確認いただけます。カスタムエディタが対応する9種類のWijmo入力コントロール全種類を使用した例となっていますので、ぜひご覧ください。

転置グリッド：カスタムエディタ

Wijmoの入力コントロールをTransposedGridの行定義に割り当てカスタムエディターとして利用する方法を示すデモです。

MESCIUS inc. Wijmoデモ > グリッド > 転置グリッド > カスタムエディタ

この他にもWijmoの各種コントロールの基本的な使い方や応用的な使い方の解説を連載記事として公開しています。ご活用いただけますと幸いです。

また、製品サイトではWijmoの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。

ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。

＼  この記事をシェアする  ／