JavaScript/Wijmo

WijmoのFlexGridでデータが存在しない場合の表示をカスタマイズする

by MESCIUS-dev

2025年5月14日にリリースされた「Wijmo（ウィジモ）」の最新バージョン「2025J v1」では、データグリッドコントロール「FlexGrid（フレックスグリッド）」において、表示するデータが存在しない場合の表示をカスタマイズできるオーバーレイコンテンツ機能が追加されました。

FlexGridに表示するデータが存在しない場合、これまではFlexGridが空の状態で表示されましたが、この機能によりUXに配慮したインターフェースを構築できるようになります。表示するコンテンツにはHTML要素を設定することもできるので、style属性やclass属性などを使用し、エンドユーザーが見やすく装飾を加えることも可能です。

オーバーレイコンテンツ機能

本記事では、上記の新機能の使い方を簡単なサンプルを用いて解説します。

開発環境の準備

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

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

index.htmlページ本体。要素としてFlexGridと検索条件入力用のInputDateRangeを配置します
app.jsFlexGridとInputDateRangeを作成するコードを記載します
data.jsFlexGridに連結するデータを記載します
styles.cssこのサンプルで使用する各要素のスタイルを設定するコードを記載します

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

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

  • scripts/wijmo.grid.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が依存する以下のパッケージも自動的にインストールされます。

npm install @mescius/wijmo.grid
  • @mescius/wijmo
  • @mescius/wijmo.input
  • @mescius/wijmo.styles

サンプルの概要

このサンプルは、ある商品の入出庫状況を表示するもので、入出庫日ごとの入出庫数や在庫数を確認することができます。

サンプルの概要

「対象期間の設定」にあるInputDateRangeコントロールで期間を指定して［検索］ボタンを押下すると、その期間のデータがFlexGridコントロールに表示されます。また、［解除］ボタンを押下すると直前に設定された対象期間が解除されて、すべてのデータが表示されます。

データに存在しない期間が指定された場合、これまではFlexGridのデータ領域には何も表示されませんでしたが、新しく追加されたオーバーレイコンテンツ機能を使うことでエンドユーザーに適切な情報を表示し、必要な操作を実行するためのインターフェースを提供できます。

このサンプルを使ってオーバーレイコンテンツの機能を解説していきます。

サンプルの作成

FlexGridの初期化とデータのフィルタ処理の実装

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>FlexGridのオーバーレイコンテンツ機能</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.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.20251.34/styles/wijmo.min.css" />
    <script src="https://cdn.mescius.com/wijmo/5.20251.34/controls/wijmo.min.js"></script>
    <script src="https://cdn.mescius.com/wijmo/5.20251.34/controls/wijmo.grid.min.js"></script>
    <script src="https://cdn.mescius.com/wijmo/5.20251.34/controls/wijmo.input.min.js"></script>
    <script src="https://cdn.mescius.com/wijmo/5.20251.34/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>
        <fieldset>
            <legend>対象期間の設定</legend>
            <div id="Wijmo_InputDateRange"></div>
            <button class="button" onclick="setFilter();">検索</button>
            <button class="button" onclick="resetFilter();">解除</button>
        </fieldset>
    </div>
    <div id="Wijmo_FlexGrid"></div>
</body>
</html>

続いて「app.js」を以下のように作成し、FlexGridの初期化処理や、データの絞り込みの処理を定義します。ここではCollectionViewクラスのfilterプロパティを使ってFlexGridコントロールに表示するデータを絞り込みます。
CollectionViewの詳細は、ヘルプとAPIリファレンスおよびデモをご参照ください。
※ ライセンスキーを設定しない場合トライアル版を示すメッセージが表示されます。ライセンスキーの入手や設定方法についてはこちらをご覧ください。

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

var view;
var grid;
var range;

document.addEventListener("DOMContentLoaded", () => {
    setView();
    setGrid();
    setRange();
});

// CollectionViewの生成
const setView = () => {
    view = new wijmo.collections.CollectionView(getData());
}

// FlexGridコントロールの生成
const setGrid = () => {
    grid = new wijmo.grid.FlexGrid(
        '#Wijmo_FlexGrid',
        {
            autoGenerateColumns: false,
            columns: [
                {
                    binding: 'ID',
                    isReadOnly: true,
                    width: 70
                },
                {
                    binding: '入出庫日',
                    cssClass: 'date',
                    format: 'yyyy/MM/dd (ddd)',
                    isReadOnly: true,
                    width: 200
                },
                {
                    binding: '入庫数',
                    isReadOnly: true,
                    width: 130
                },
                {
                    binding: '出庫数',
                    isReadOnly: true,
                    width: 130
                },
                {
                    binding: '在庫数',
                    cssClassAll: 'stock',
                    isReadOnly: true,
                    width: 130
                }
            ],
            itemsSource: view,
        }
    );
    grid.columnHeaders.rows[0].cssClass = 'column-header';
}

// InputDateRangeコントロールの生成
const setRange = () => {
    range = new wijmo.input.InputDateRange(
        '#Wijmo_InputDateRange',
        {
            value: getFirstDate(),
            rangeEnd: getLastDate(),
            closeOnSelection: false,
            format: 'yyyy/MM/dd (ddd)',
            monthCount: 2,
            separator: '  -  '
        }
    );
}

// 検索の実行
const setFilter = () => {
    // InputDateRangeコントロールの範囲の取得
    const startDate = range.value;
    const endDate = range.rangeEnd;

    // CollectionViewのfilterの設定
    view.filter = (item) => {
        const itemDate = item.入出庫日;
        if (startDate && endDate) {
            return itemDate >= startDate && itemDate <= endDate;
        }
        else {
            return true;
        }
    };
};

// 検索の解除
const resetFilter = () => {
    // InputDateRangeコントロールの初期化
    range.value = getFirstDate();
    range.rangeEnd = getLastDate();

    // CollectionViewのfilterの解除
    view.filter = (item) => {
        return true;
    };
};

「data.js」ではランダムなテストデータを生成する処理、およびデータ内の先頭日付と末尾日付の取得を行う処理を定義します。

const temp = [];

// データの作成
const getData = () => {
    const startDate = wijmo.DateTime.newDate();
    const endDate = wijmo.DateTime.addMonths(startDate, 1);
    let id = 0;
    let date = startDate;
    let inQuantity;
    let outQuantity;
    let stock = 2000;
    while (date < endDate) {
        inQuantity = Math.floor(Math.random() * 1000);
        outQuantity = Math.floor(Math.random() * (stock + inQuantity));
        stock = stock + inQuantity - outQuantity;
        if (date.getDay() != 0 && date.getDay() != 6) {
            id++;
            temp.push({
                ID: id,
                入出庫日: date,
                入庫数: inQuantity,
                出庫数: outQuantity,
                在庫数: stock
            })
        }
        date = wijmo.DateTime.addDays(date, 1);
    }
    return temp;
}

// データ内の先頭日付の取得
const getFirstDate = () => {
    if (temp.length > 0) {
        return temp[0].入出庫日;
    }
    return;
}

// データ内の末尾日付の取得
const getLastDate = () => {
    if (temp.length > 0) {
        return temp[temp.length - 1].入出庫日;
    }
    return;
}

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

/* FlexGridのスタイル */
#Wijmo_FlexGrid {
    border: 1px solid gray;
    height: 354px;
    width: 722px;
}

.column-header {
    text-align: center !important;
}

.date {
    color: blue !important;
    text-align: center !important;
}

.stock{
    background-color: beige !important;
}

.overlay {
    font-weight: bold;
    font-size: 20px;
    color: #E06B7E;
    text-align: center;
}

.overlay-button {
    height: 30px;
    width: 150px;
    margin-left: 10px;
    margin-right: 10px;
}

/* InputDateRangeのスタイル */
#Wijmo_InputDateRange {
    width: 460px;
}

.wj-form-control {
    color: blue !important;
    text-align: center !important;
}

/* その他の要素のスタイル */
fieldset {
    border: 1px solid gray;
    border-radius: 8px;
    margin-bottom: 15px;
    width: 695px;
}

.button {
    height: 30px;
    width: 100px;
    margin-left: 10px;
}

上記実装後、Live Serverでアプリケーションを実行すると、以下のようにFlexGridへのデータの表示と、指定した日付による絞り込み処理が行えます。

オーバーレイコンテンツの設定

次にデータを絞り込んだ結果、該当するデータが存在しない場合のオーバーレイコンテンツを設定していきます。

FlexGridコントロールのitemsSourceプロパティにデータが設定されていない場合や絞り込み処理により表示できるデータがない場合、FlexGridコントロールのデータ表示領域は空白になります。エンドユーザーは表示対象のデータが存在しないのか、何かエラーが発生しているのか、などを一目で理解することが難しい状況でした。

空白のFlexGrid

新機能のオーバーレイコンテンツを使用することで、データが存在しない場合でもエンドユーザーが理解しやすいインターフェースを提供できます。

オーバーレイコンテンツは、FlexGridコントロールのnoDataOverlayContentプロパティに文字列を設定することで表示されるようになります。

・・・（中略）・・・
            itemsSource: view,
            // オーバーレイコンテンツの設定
            noDataOverlayContent: '入力した日付に該当するデータがありませんでした。対象期間を変更して再度検索してください。'
・・・（中略）・・・

設定後に再度実行すると、該当データが存在しない場合にnoDataOverlayContentプロパティに設定した文字列が表示されるようになります。

オーバーレイコンテンツにHTMLタグを使用したコンテンツを設定

noDataOverlayContentプロパティにはHTMLタグを使用したコンテンツを設定することも可能です。
※ noDataOverlayContentプロパティではscriptタグ、styleタグ、linkタグはサポートしていません。

今回は以下のようなHTMLコンテンツを設定し、装飾したメッセージを表示するほか、対象期間の変更を行うボタンと、検索結果を初期化するボタンを配置します。

・・・（中略）・・・
            itemsSource: view,
            // オーバーレイコンテンツの設定
            noDataOverlayContent:
            '<div class="overlay"><p>'
            + '入力した日付に該当するデータがありませんでした。<br>'
            + '対象期間を変更して再度検索してください。</p>'
            + '<button class="overlay-button" onclick="changeRange();">'
            + '対象期間の変更</button>'
            + '<button class="overlay-button" onclick="resetFilter();">'
            + '検索処理の解除</button></div>'
・・・（中略）・・・

対象期間の変更を行うボタンで実行する処理は「app.js」に以下のように追記します。

・・・（中略）・・・
// 対象範囲の変更
const changeRange = () => {
    // InputDateRangeコントロールのカレンダーを表示
    range.isDroppedDown = true;
};

上記のようなオーバーレイコンテンツを設定することで、エンドユーザーは、次のような情報を瞬時に把握することができます。

  • 指定した期間にはデータが存在しないこと
  • そのため対象期間を変更する必要があること
  • 対象期間を変更するには表示されたボタンをクリックすればよいこと
  • 必要に応じて初期状態に戻すボタンが用意されていること

実行すると、以下のように条件に合致するデータが存在しない場合に、装飾されたメッセージとボタンが表示されます。

［対象期間の変更］ボタンを押下すると、ドロップダウンカレンダーが開いて日付の条件を変更できます。

［検索処理の解除］ボタンを押下すると、フィルタ処理が解除され初期表示の状態に戻ります。

オーバーレイコンテンツについてヘルプとデモで解説しているので、そちらもご一読いただければと思います。

さいごに

今回は「Wijmo」の「FlexGrid」コントロールで表示するデータが存在しない場合にHTMLタグを使ったオーバーレイコンテンツを表示する方法について解説しました。

今回ご紹介したオーバーレイコンテンツの設定方法は以下のデモアプリケーションで確認できます（“Run Project”をクリックするとデモが起動します）。

この他にもWijmoの各種コントロールの基本的な使い方や応用的な使い方の解説を連載記事として公開しています。こちらも是非ご覧ください。

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

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

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