Articles Tagged: IgxGrid

IgxGrid では、列のドラッグ＆ドロップによる移動が可能ですが、特定の列は移動できないように制御したいケースもあります。この記事では、「Name」列を固定し、それ以外の列のみ移動を許可する実装方法を紹介します。 Ig […]

igxGridのセルテンプレート機能を使用してセルにボタンを配置し、cssによって表示を行のホバー時に限定することができます。 以下の例では「col3」列にテンプレートを設定し、ボタンを配置しています。 cssを以下のよ […]

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 […]