IgxGrid

IgxGrid – セルのフォーマットを変更したい

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

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

IgxGrid は ISortingStrategy を実装することでソート方法をカスタマイズすることができます。この方法を応用して、欠損値として “-” や “*” や […]

IgxGrid で IgxColumn の dataType を boolean にすると、が表示されます。ただ、どちらも印がつくので見分けがつきにくい、特に false のときは何も表示しないようにしたい、といったお […]

IgxGrid のヘッダー文字列のセンタリングはhttps://kb.jp.infragistics.com/?p=11445でできます。しかしながら、フィルター機能やソート機能を有効化してそれらのアイコンの領域が確保 […]

IgxGrid のヘッダー文字列をセンタリングするには、センタリングするCSSクラスを作成し、それを igx-column の headerClasses に指定してください。　実行結果「ID」列と「姓」列のヘッダ […]

Ignite UI for Angular 15.0.2 バージョン時点での情報に基づいています。 IgxGrid のセルに適用されている CSS のクラス名（.igx-grid__td-text）にスタイルを適用するこ […]

Ignite UI for Angular 14.0.0 バージョン時点での情報に基づいています。 IgxGrid では IgxActionStrip に機能を加えることで、行操作メニューを加えることができます。IgxA […]

ローカライズした際に一部の文言を任意に変更したい場合があります。例えば IgxGrid の Excel スタイルフィルタリングを利用した際の「APPLY」ボタンはデフォルトの日本語ローカライズでは「適用」となります […]

IgxGridを複数個置いてスクロールを同期させたい場合は、IgxGridのgridScrollイベントを使ってそれぞれのスクロール位置を同じ値にします。スクロール位置は、IgxForOfディレクティブで制御できます。 […]