インフラジスティックス・ジャパン株式会社Blogインフラジスティックス・ジャパン株式会社Blogインフラジスティックス・ジャパン株式会社のチームメンバーが技術トレンド、製品Tips、サポート情報からライセンス、日々の業務から感じることなど、さまざまなトピックについてお伝えするBlogです。Hatebuこんにちは、テクニカルコンサルティングチームの中江です。各種コンポーネントの実装を通してモダンWEBアプリケーションの開発に触れてみようという趣旨で作成しております。ついては、以下の弊社ブログ記事も有用ですので是非ご参照ください。blogs.jp.infragistics.comblogs.jp.infragistics.com本連載の過去記事は以下となります。高機能なグリッドを配置していきます。データソースはオンラインで公開されているJSONデータを利用します。トライアル版を利用するには新しいページを作成するまずはグリッドを表示するためのページを新規追加します。ソリューションエクスプローラーは現在以下のようになっています。コンポーネント」を選択します。以下の画面が表示されますので、名前を設定して「追加」ボタンを押します。今回はファイル名「Grid.razor」とします。ルーティング設定する作成したページを表示するためにルーティング設定を行います。ディレクティブを追加するだけです。先ほど作成したファイル名「Grid.razor」に以下のように追記します。{}ナビメニューにリンクを追加するメニューに作成したグリッドページへのリンクを追加します。ナビメニューはファイル名「Shared/NavMenu.razor」にてコンポーネント化されていますのでこちらに以下のように追記します。コンポーネントを使用している点に注意してください。▽参考https://docs.microsoft.com/ja-jp/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-3.1#navlink-component一度デバッグをして確認してみましょう。初期画面にメニューが追加されていることが分かります。切り替わり、新規作成したページが表示されることが確認できます。グリッドを設置していきます。それではグリッドを設置していきます。ファイル名「Grid.razor」を以下のように変更します。グリッドを配置するためのテンプレートタグとなります。データソースとして空のデータを渡しているので現状ではグリッドには何も表示されません。データバインディングしてグリッドにデータを表示していきます。グリッドにデータバインディングする今回はオンライン上で公開されているJSONデータを取得してグリッドに表示していきます。データソースは厚生労働省がコロナウイルス対策関連で公開している「各都道府県の検査陽性者の状況」データを使用します。https://www.stopcovid19.jp/data/covid19japan.json本データの詳細は以下よりご確認ください。今回扱うデータのモデルを定義していきます。ソリューションエクスプローラー上でプロジェクトを右クリックし、コンテキストメニューを表示したら「追加」、「新しいフォルダー」と選択し、「Models」というフォルダを新規追加します。フォルダ上で右クリックをし、コンテキストメニューから「追加」、「クラス」と選択し、ファイル名「Covid19Japan.cs」というクラスを新規追加します。ファイル名「Covid19Japan.cs」にはデータソースのモデルを以下のように定義しました。JSONデータを取得していきます。https://www.nuget.org/packages/Microsoft.AspNetCore.Blazor.HttpClient/3.2.0-preview3.20168.3(2020年10月29日現在、こちらのパッケージはプレビュー版となっています。)以下のようにファイル名「Grid.razor」を変更し、実行してみます。部分をグリッドにバインドしていきます。ファイル名「Grid.razor」を以下のように変更します。}}実行してグリッドページを確認します。以下のように都道府県別のデータを表示することが出来ました。グリッドの動作を確認するグリッドが表示出来たら、グリッドの動作を確認してみましょう。グリッドのヘッダー行にマウスオーバーするとドットが縦に3つ並んだアイコンが表示されます。そのアイコンをクリックするとこのようなドロップダウンメニューが表示されます。このメニューでは列の非表示やピン固定、フィルタリングなど様々な操作をすることが出来ます。次回はこのグリッドをカスタマイズしながら豊富な機能を確認していきたいと思います。blogs.jp.infragistics.com今回作成したサンプルは以下よりダウンロードいただけます。トライアル板での試用が可能です。トライアル版を利用するためには以下のページよりアカウントの作成を行ってください。登録より30日間、弊社のテクニカルサポートをご利用いただくことが出来ますのでお気軽にお問い合わせください。https://iam.infragistics.com/Account/Registerまた、製品をご購入をご検討のお客様は以下のページよりお気軽にお問い合わせください。2022年12月のリリースについてこんにちは、インフラジスティックス・ジャパンです。最新情報こんにちは、インフラジスティックス・ジャパンです。f...こんにちは、テクニカルコンサルティングチームの中江です。»Aboutインフラジスティックス・ジャパンのチームメンバーが技術トレンド、製品Tips、サポート情報からライセンス、日々の業務から感じることなど、さまざまなトピックについてお伝えするBlogです。Reserved引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。