1. igx-columnにセル編集テンプレートを使用し、2. セル編集テンプレートにigx-date-pickerを配置し、3. igx-date-pickerでさらにng-templateを埋め込み、4. 3のng- […]
Articles Tagged: IgxGrid
IgxGrid: テーマの仕組みを利用してヘッダーテキストの配色を変更しても、くすんだ色味になってしまう
この KB は 製品バージョン 11.1.7 をベースにしています。 テーマの仕組みを利用してヘッダーテキストの色味を変更することができます。例えば次のように配色を行います。 問題 但し、このように色味を変更しても、ヘッ […]
IgxGrid 編集可能列をスタイリングする
この KB は 製品バージョン 11.1.7 をベースにしています。 IgxGrid で編集可能列をスタイリングするには、IgxGrid 列(IgxColumn)の cellClasses プロパティにバインドするオブジ […]
igxGrid 列ヘッダーのテキストを改行表示する
列ヘッダーのテキストは以下のcss設定にて改行表示となります。 結果 サンプル: https://stackblitz.com/edit/github-5wbcu6-5pqj9k?file=src/app/grid/ […]
IgxGrid dataType=”‘date'”の列で編集時の日付書式を設定する。
セル編集テンプレートを使用してigx-date-pickerを埋め込み、そこでformatとmaskを指定してください。 実行結果 サンプル リファレンス セル編集テンプレート https://jp.infr […]
igxGrid セルテキストを右寄せにする
セルのテキストを右寄せにするには、justify-content: flex-end;を指定したcssクラスをターゲットの列のcellClassesプロパティに設定します。 結果 リファレンス 「IgxColum […]
IgxGrid 条件に応じてセルに異なるスタイルを適用する
この KB は 製品バージョン 11.1.7 をベースにしています。 下記ナレッジベースに類似するシナリオですが、セルの値に応じて異なるスタイルを適用する方法をご紹介します。 IgxGrid 条件に応じてセルにスタイルを […]
IgxGrid ヘッダーの高さを指定する。
IgxGridのヘッダーの高さを指定する場合は、ヘッダーを構成している要素に高さ関係のCSSの指定をしてください。 実行結果 サンプル
[Ignite UI for Angular 11.1 新機能] IgxGrid、IgxTreeGrid、IgxHierarchicalGridにselectRowOnClickプロパティが追加され、行のクリックでその行を選択するかどうかを指定できるようになりました。
Ignite UI for Angular 11.1.7バージョン時点での情報に基づいています。 Ignite UI for Angular 11.1にて、IgxGrid、IgxTreeGrid、IgxHierarchi […]
[Ignite UI for Angular 11.1 動作変更] IgxGrid、IgxTreeGrid、IgxHierarchicalGridで編集中に列固定、列移動、ページングを行った場合、編集中の値が元に戻る形に変更されました。
Ignite UI for Angular 11.1.7バージョン時点での情報に基づいています。 IgxGrid、IgxTreeGrid、IgxHierarchicalGridで編集中に列固定、列移動、ページングを行った […]