Ignite UI for Angular

IgxGrid – 任意の列の移動を制限したい

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 のときは何も表示しないようにしたい、といったお […]

IgxInputの高さはcss設定よって変更することができます。このようにid指定を行ったinput-groupに対し、以下のようなcss設定でIgxInputの高さを変更できます。(セレクターからidを除けばすべての […]

インフラジスティックス Ignite UI 製品の利用にあたり、ライセンス版の npm パッケージを使用するには、こちらのナレッジベース記事に従って、ご自身のアクセストークンを取得の上、「npm config set」コ […]

現象 ig new コマンド実行時 Angular アプリケーション向けの UI コンポーネントライブラリ Ignite UI for Angular を使用した Angular プロジェクトを新規作成する場合、予め「n […]