Ignite UI for Angular 15.0.2 バージョン時点での情報に基づいています。 IgxGrid のセルに適用されている CSS のクラス名(.igx-grid__td-text)にスタイルを適用するこ […]
Articles Tagged: IgxGrid
IgxGrid – IgxGridEditingActions による行編集機能の有効・無効切り替え
Ignite UI for Angular 14.0.0 バージョン時点での情報に基づいています。 IgxGrid では IgxActionStrip に機能を加えることで、行操作メニューを加えることができます。IgxA […]
IgxGrid ローカライズ テキストの一部変更
ローカライズした際に一部の文言を任意に変更したい場合があります。 例えば IgxGrid の Excel スタイル フィルタリング を利用した際の「APPLY」ボタンはデフォルトの日本語ローカライズでは「適用」となります […]
IgxGrid – 2つのグリッドのスクロールを同期させる
IgxGridを複数個置いてスクロールを同期させたい場合は、IgxGridのgridScrollイベントを使ってそれぞれのスクロール位置を同じ値にします。 スクロール位置は、IgxForOfディレクティブで制御できます。 […]
IgxGrid – ng-container を使った複数列ヘッダ定義方法
header 用の JSON データを用意し、そのデータを使って複数列ヘッダを定義する方法をご紹介します。 構築する Gird イメージはこちらです。 用意する header 用の JSON データはこちら この hea […]
IgxGrid – デフォルトのツールチップを非表示にする
igxGrid ではバージョン10.1.0より、デフォルトのテンプレートを使用するセル(集計セルを含む)に自動的にツールチップが表示されるようになりました。 このデフォルトのツールチップを非表示にするプロパティが現在は未 […]
IgxGrid で全ページの全行を選択する方法
Ignite UI for Angular 13.1.7 バージョン時点での情報に基づいています。 Ignite UI for Angular で提供している IgxGrid において、全ページの全レコードをチェック(選 […]
IgxGrid テンプレート機能を利用し、エディタを常に表示する
IgxGrid のテンプレート機能を利用し、常にエディタを表示してみます。テンプレート機能は、次の様に igx-column 配下に、ng-template を配置し、igxCell ディレクティブを付与します。そしてそ […]
ウィンドウ幅に応じて IgxGrid の横幅を変更する
Ignite UI for Angular 12.0.5 バージョン時点での情報に基づいています。 IgxGrid の横幅を、ウィンドウ幅に応じて動的に変更するサンプルです。 ウィンドウ幅が変更になったタイミングを検知し […]
igxGrid:フィルター適用後のデータ行を取得する
IgxGridComponentのfilteredDataアクセサよりフィルター後のデータコレクションを取得することができます。 以下のサンプルでは、filteringDoneイベントで現在の表示行数をグリッドの上に表示 […]