Ignite UI for Angular 11.1.10 バージョン時点での情報に基づいています。 IgxGrid では、IgxGridStateDirective と連携することで、IgxGrid の各種状態を保存・ […]
Articles Tagged: IgxGrid
IgxGrid 集計行の表示・非表示を動的に切り替えたい
Ignite UI for Angular 11.1.10 バージョン時点での情報に基づいています。 IgxGridの集計行の表示・非表示を動的に切り替えたい場合は、各列(IgxColumnComponent)のhasS […]
igxGrid 全ての非表示列を再表示する
Ignite UI for Angular 11.2.12バージョン時点での情報に基づいています。 igxGrid は、列を非表示機能を提供しています。 また、非表示にした列は、ツールバーから再表示することができますが、 […]
IgxGrid IgxGridToolbarの表示・非表示を動的に切り替える
IgxGridのIgxGridToolbarの表示・非表示を動的に切り替えるには、Angularの*ngIfなどの仕組みを使って表示を切り替えたあと、IgxGridのreflowメソッドとmarkForCheckメソッド […]
IgxGrid IgxGridToolbarの高さを狭める方法
IgxGridのIgxGridToolbarの高さを狭めたい場合は、 IgxGridToolbarのdisplayDensityを”compact”などにする。 もしくは CSSでheightを直 […]
IgxGrid 選択されている行のデータを取得する方法
IgxGridで選択されている行のデータを取得するには、 IgxGridComponentのselectedRowsで選択行のIDの配列を取得する。 1で取得した配列の各要素に対して、IgxGridComponentのg […]
IgxGrid dataType=”‘date'”の列で編集時のマスクの”_”を別の文字に設定する。
1. igx-columnにセル編集テンプレートを使用し、2. セル編集テンプレートにigx-date-pickerを配置し、3. igx-date-pickerでさらにng-templateを埋め込み、4. 3のng- […]
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/ […]