igniteui-angular とは? igniteui-angular は、Ignite UI for Angular のパッケージです。 Ignite UI for Angular は、Angular Materi […]
Category: Ignite UI for Angular
IgxGrid に IgxSelect を組み込む
IgxGrid の編集機能では、デフォルトエディタの代わりに好きな入力エディタを使うようカスタマイズすることができます。IgxSelect を組み込んでみます。 1. IgxSelectModule を import し […]
IgxGrid ローカライズ方法
1. リソース文字列用の igniteui-angular-i18n パッケージをインストールします。 2. Angular 自体で ja-JP ロケールを使用するように登録し、igniteui-angular の方では […]
IgxGrid 列ヘッダーへのスタイリング適用
IgxGrid の IgxColumn で公開されている headerClasses を利用することで、列ヘッダーにスタイルを適用することができます。
IgxGrid 複数列ヘッダーへのスタイリング適用
IgxGrid の IgxColumnGroup で公開されている headerGroupClasses を利用することで、複数列ヘッダーにスタイルを適用することができます。
IgxGrid 複数列ヘッダーの使い方
IgxGrid の複数列ヘッダーは、 IgxColumnGroup を定義し、その配下に IgxColumn を定義することで表示することができます。
ボタンクリックで IgxDialog を表示する
IgxDialog の open メソッドで IgxDialog を開くことができます。
IgxGrid タブによるエクセルライクなセル移動
IgxGrid では、ビルトインの機能として、タブ(Tab)によるエクセルライクなセル移動を行うことができます。 Tab 押下・・・右隣のセルに移動。一番右の列まで進むと、次の行の一番左の列に移動します。Shift + […]
IgxGrid セルの編集を行う方法
Ignite UI for Angular 9.1.7 バージョン時点での情報に基づいています。 IgxGrid の列にある editable オプションを有効化することで、セルの編集を行うことができます。 サンプル
IgxGrid 複数行レイアウトを利用する方法
IgxGrid では、1データレコードを複数行にわたって表示することができます。 IgxGrid 配下の IgxGridColumnLayout を定義し、その配下に列を定義します。また、各列のレイアウトは rowSta […]