Ignite UI for Angular

IgxGrid – 行削除をキャンセルしたい

この記事では、行削除の確認ダイアログを表示し、ユーザーが「キャンセル」を選んだ場合には削除処理を中止する方法を紹介します。 IgxGrid の設定 rowDeleteイベントを利用すると、削除直前に処理を挟むことができま […]

この記事では、エクスポートの開始時にファイル名をユーザー入力で設定する方法を紹介します。 IgxGrid の設定 IgxGridToolbarExporterComponent のexportStartedイベントをバイ […]

Ignite UI for Angular 製品のトライアル版を使用して作成したアプリケーションをライセンス版にアップデートする方法についてご案内します。まず、以下のページの手順に従い、ライセンス版の npm パッケー […]

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

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

igc-dockmanagerにはペインをピン解除した際にタブヘッダーが表示されるdiv領域が左右にあります。これらの領域の要素に対してcssクラス「unpinned-tab-area–hidden」を追加 […]

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

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

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

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