Ignite UI for React

IgrGrid – セル値を動的に更新する

本記事では、updateCellを使用して、数量や単価を編集した際に、合計金額を自動で再計算して表示する方法を解説します。 IgrGrid の設定 IgrGrid のupdateCellメソッドを利用すると、任意の行・列 […]

通常、コールアウトレイヤー (IgrCalloutLayer) を使用すると、すべてのシリーズに対して同じ色やスタイルで表示されます。しかし、シリーズごとに異なる背景色やテキストカラーを設定したい場合があります。本記事 […]

IgrGrid においてデータのフォーマットをカスタマイズする方法についてご紹介します。本記事では、formatterを使用して、数値データに単位を付加する方法を解説します。 IgrGrid の設定 IgrGrid のf […]

IgrGrid でセルの値に応じて行全体の色を変更する方法を紹介します。　本記事では、在庫数に応じて行の色を変える実装を行います。 IgrGrid の設定 IgrGrid のrowClassesに TypeScript […]

IgrGrid を使用してグリッドを作成する際、セル内のテキストを右寄せにする方法を紹介します。(下図は dataType=”String” を指定したときの様子)。方法セルのテキストを右寄せ […]

ユーザーがペインを閉じる際にキャンセル処理を実装する方法を解説します。本記事では、閉じるボタンを押下した際に確認ダイアログを表示し、ペインを閉じるかどうかをユーザーが決定できるようにする手順を紹介します。 paneClo […]

IgrGrid で行選択機能を使用する際、デフォルトでは行またはセルをクリックすると行選択状態となります。本記事では行をクリックしても行選択状態とならず、チェックボックスの使用のみ行選択する方法について解説します。 se […]

IgrGrid のセルに罫線を引きたい場合は、CSS で各 DOM 要素に border の設定をしてください。実行結果　サンプルプログラムのダウンロード GitHub リポジトリはこちら　

IgrGrid でnavigateToメソッドを使用して、グリッドのスクロール位置を動的に変更する方法について説明します。グリッドの参照を作成する useRefフックを使用して、グリッドの参照を作成します。これにより、 […]

IgrGrid でフィルターを適用した後のデータを取得する方法について説明します。グリッドの参照を作成する useRefフックを使用して、グリッドの参照を作成します。これにより、グリッドのインスタンスにアクセスできるよ […]