Articles Tagged: IgxGrid

IgxGridのIgxGridToolbarの表示・非表示を動的に切り替えるには、Angularの*ngIfなどの仕組みを使って表示を切り替えたあと、IgxGridのreflowメソッドとmarkForCheckメソッド […]

IgxGridのIgxGridToolbarの高さを狭めたい場合は、 IgxGridToolbarのdisplayDensityを”compact”などにする。 もしくは CSSでheightを直 […]

IgxGridで選択されている行のデータを取得するには、 IgxGridComponentのselectedRowsで選択行のIDの配列を取得する。 1で取得した配列の各要素に対して、IgxGridComponentのg […]

この KB は 製品バージョン 11.1.7 をベースにしています。 テーマの仕組みを利用してヘッダーテキストの色味を変更することができます。例えば次のように配色を行います。 問題 但し、このように色味を変更しても、ヘッ […]

この KB は 製品バージョン 11.1.7 をベースにしています。 IgxGrid で編集可能列をスタイリングするには、IgxGrid 列（IgxColumn）の cellClasses プロパティにバインドするオブジ […]

列ヘッダーのテキストは以下のcss設定にて改行表示となります。 　 結果 サンプル: https://stackblitz.com/edit/github-5wbcu6-5pqj9k?file=src/app/grid/ […]

セル編集テンプレートを使用してigx-date-pickerを埋め込み、そこでformatとmaskを指定してください。 　 実行結果 　 サンプル 　 リファレンス セル編集テンプレート https://jp.infr […]

セルのテキストを右寄せにするには、justify-content: flex-end;を指定したcssクラスをターゲットの列のcellClassesプロパティに設定します。 　 結果 　 リファレンス 「IgxColum […]

この KB は 製品バージョン 11.1.7 をベースにしています。 下記ナレッジベースに類似するシナリオですが、セルの値に応じて異なるスタイルを適用する方法をご紹介します。 IgxGrid 条件に応じてセルにスタイルを […]