ナレッジベースで学ぶ Ignite UI for Blazor その２🎃 - インフラジスティックス・ジャパン株式会社Blog

こんにちは！インフラジスティックス・ジャパンの Mori です。

今回は、前回に引き続き弊社ナッレジベースの記事の中から、Ignite UI for Blazor の入門にぴったりのコンテンツをピックアップしました！この記事を読んで実際にサンプルをさわっていただくだけで、製品にスムーズに慣れていただけること間違いなしです！（前も言ってた！）

というわけで、まずは全体のラインナップをご紹介します。今回はその２！

（その１）

導入・セットアップ編
基本コンポーネント操作編
IgbGrid：基本表示編blogs.jp.infragistics.com

（その２）

IgbGrid：カスタマイズ編
IgbDataChart：基本と応用編
IgbGrid：ローカライズ編

前回はその１で、導入から IgbGrid の表示までのファーストステップを見ていただきましたので、その２ではちょっとした応用ステップを見ていただきたいと思います！

では早速いってみましょー！

その２ 🏀

IgbGrid：カスタマイズ編 (๑•̀ㅂ•́)و✧

ご紹介する記事はこちら！

kb.jp.infragistics.com

行数に応じて高さを自動調整するサンプル。不要なスクロールバーを出さないテクニックを学べます。

グリッド表示って、データ量や画面構成によって高さの調整が必要になることが多いんです。この記事では、IgbGrid を使って、グリッドの高さを状況に応じて動的に変える方法を丁寧に解説してくれています。IgbGrid を使って、柔軟に高さを管理したいときに非常に役立つ内容ですね！特に、行数が可変のグリッドでは、スクロールバーの有無を制御しつつ表示の整合性を保つのにぴったりのテクニックです。この記事に限らずですが、実装の手順と内容が詳しく載っているので、迷わず実装できそうです！

そしてお次はこちら！

kb.jp.infragistics.com

BodyTemplateを使って任意の HTML 要素を埋め込む方法。セルのカスタマイズ入門としておすすめです。

グリッドを使った資料やリストの中に、URL リンクを載せたいってご要望、結構あるんじゃないでしょうか。こちらの記事では BodyTemplate を使ったサンプルのほか、高パフォーマンスが必要になる場合の対処方法など、詳細な解説がありますので、ハイパーリンクに限らず学習記事としてもぜひご覧になっていただきたい記事となっております！

IgbDataChart：基本と応用編 ٩(ˊᗜˋ*)و

ご紹介する記事はこちら！

kb.jp.infragistics.com

チャートをクリックした際のイベントをキャッチしてチャートの詳細データを取得し画面に表示したり、データを使った処理を行うことができます。

チャートをクリックして取得したデータをもとに、具体的な操作や次の処理を実行したいことってありますね。クリックしたデータを別の領域にコピーしたり、データそのものを加工して別の見せ方をしたり。この記事では取得したデータを詳細に表示する機能を実装しています。視覚的なチャートからデータを取得するだけでいろいろな展開をすることができますね！

続いての記事はこちら

kb.jp.infragistics.com

IgbValueLayerの

ValueModeで統計情報を重ねて表示します。チャートの次ステップ学習に最適です。

こちらの記事では視認もしやすくなるプロパティのご紹介をしています。複数チャートを表示して、データポイントもたくさんあると、最大値、最小値を目視で確認するのは大変です。平均値なんてものすごい計算力をもってしても厳しいでしょう！IgbDataChart では視覚的にもわかりやすくそれらを表示する機能が備わっています。

ぜひ試してみてください！

つづいてはこちら！

kb.jp.infragistics.com軸ラベルフォーマットのカスタマイズ例をご紹介。見やすいチャート作成の基本を学べます。こちらの記事では、数値ラベルを 3 桁ごとにカンマ区切りにしたい。という非常に非常に多いお問い合わせに向けた内容となっています。やはり大きな数値になると必須の機能ですね。チャートを扱う際にはとても利用頻度が高いので、ブログでもご案内させていただきました！