Ignite UI for Angular の IgxDataChart で、ボタンをクリックしたときにチャートをズームイン/ズームアウトする方法を紹介します。IgxDataChartComponent の zoomIn […]
Category: Ignite UI for Angular
IgxDataChart – ボタンクリックでズームをリセットしたい
IgxDataChart でドラッグ操作によりズームしたあと、ボタンをクリックしてズームを初期状態に戻す方法を紹介します。 IgxDataChart の設定 defaultInteraction プロパティに DragZ […]
IgxCategoryChart – 縦棒のクリックでドリルダウン表示したい
Category Chart で縦棒(シリーズ)をクリックしたときに、その項目の内訳データへ切り替えてドリルダウン表示するには、seriesClick イベントを処理し、イベント引数の item から取得したクリック項目 […]
IgxDialog – 全画面表示中にダイアログを表示したい
Fullscreen API で要素を全画面表示にすると、igx-dialog や igx-select のドロップダウンが表示されなくなります。全画面にする要素の中に igxOverlayOutlet を置き、オーバー […]
IgxGrid – グリッド端にマウスホバーしたときに自動スクロールしたい
igx-grid のグリッド領域に対してマウスを上下左右の端まで近づけると、その方向へ自動的にスクロールできるようにする方法を紹介します。この動作は、水平方向のスクロールを担うheaderContainerと垂直方向のス […]
IgxGrid – groupingComparer と sortStrategy でグループ化をカスタマイズする方法
igx-grid で列をグループ化する際、同じ値でも行データの他の項目によってグループを分けたい場合は、groupingComparer と sortStrategy を組み合わせてグループ化ロジックをカスタマイズします […]
IgxMask – 日本語入力(IME)を無効にしたい
Ignite UI for Angular の igxMask ディレクティブには、日本語(全角)文字の入力を無効にするマスク文字は用意されていません。本記事では、document.body に登録したキャプチャフェーズ […]
IgxOverlayService – データ取得中にモーダルのローディングインジケーターを表示するには
本記事では、Ignite UI for Angular の IgxGridComponent でデータ取得中に画面をブロックするモーダルのローディングインジケーターを表示する方法を説明します。中心となる API は Ig […]
IgxDataChart – RangeBarSeries を使ってガント風スケジュール表示を実現する方法
Ignite UI for Angular には専用のガントチャート コンポーネントはありませんが、IgxDataChart の IgxRangeBarSeries を利用することで、タスクの開始日・終了日を横棒で表現し […]
IgxGrid – Boolean 列のフィルター項目のテキストを変更する
IgxGrid の Excel スタイルフィルターメニューの項目にはデータの値がテキストで表示されます。そのため、DataType = Boolean の列では項目名が「 True 」と「 False 」で表示されます。 […]