このトピックは、コード例を用いて、igGrid
™ コントロールでレスポンス Web デザイン(RWD) モードを有効にする方法について説明します。
以下の表は、このトピックを理解するための前提条件として必要な概念、トピック、および記事の一覧です。
igGrid
コントロールのレスポンス Web デザイン (RWD) モード機能およびこの機能がサポートする機能性について概念的に説明します。このトピックは、以下のセクションで構成されます。
igGrid
コントロールは、デフォルトでは レスポンス Web デザイン (RWD) モードは無効であるため、明示的に有効にして構成する必要があります。RWD モードは、レスポンシブ機能を介して有効にします。これは、JavaScript と ASP.NET MVC では異なります。
以下の表は、igGrid
コントロールで レスポンス Web デザイン (RWD) モードを有効にする方法について説明します。詳細は、表の後のコード例を参照してください。
以下において RWD モードを有効にするには | 以下を実行します。 |
---|---|
JavaScript ファイル | RWD モード (機能名は Responsive ) 構成を igGrid の features 配列で定義します。 |
ASP.NET MVC | グリッドの Features メソッドに渡されるデリゲートで Responsive 機能をインスタンス化します。 |
以下は、このトピックで使用したコード例を示しています。
JavaScript で RWD モードを有効にする: この例は、JavaScript で igGrid
の RWD モードを列非表示構成で有効にする操作を示します。
ASP.NET MVC で RWD モードを有効にする: この例は、ASP.NET MVC で igGrid
の RWD モードを列非表示構成で有効にする操作を示します。
以下の例は、AdventureWorks データベースからの製品表データにバインドされる igGrid
インスタンスを作成します。ProductID、Name および ProductNumber の 3 つの列を手動で定義します。
RWD モードの列非表示は、CSS クラスを使用して ProductID および ProductNumber 列用に構成されます。
ProductID 列には、hidden-tablet
および hidden-phone
CSS クラスが適用されます。これは、列はそれぞれタブレットと電話のプロファイルで表示されないという意味です。
ProductNumber では、hidden-phone
CSS クラスが適用されます。列が表示されないのは電話のプロファイルのみという意味です。
以下のコードはこの例を実装します。
JavaScript の場合:
$("#grid1").igGrid({
height: "100%",
width: "100%",
columns: [
{ headerText: "Product ID", key: "ProductID", dataType: "number"},
{ headerText: "Product Name", key: "Name", dataType: "string" },
{ headerText: "Product Number", key: "ProductNumber", dataType: "string" }
],
autoGenerateColumns: false,
dataSource: adventureWorks,
responseDataKey: "Records",
features: [
{
name: "Responsive",
columnSettings: [
{
columnKey: "ProductID",
classes: "hidden-tablet hidden-phone"
},
{
columnKey: "ProductNumber",
classes: "hidden-phone"
}
]
}
]
});
こ例は、View モデルとして定義されるカスタム Product
オブジェクト コレクションにバインドされる igGrid
インスタンスを作成します。ProductID、Name および ProductNumber の 3 つの列を手動で定義します。
RWD モードの列非表示は、CSS クラスを使用して ProductID および ProductNumber 列用に構成されます。
ProductID 列には、hidden-tablet
および hidden-phone
CSS クラスが適用されます。これは、列はそれぞれタブレットと電話のプロファイルで表示されないという意味です。
ProductNumber では、hidden-phone
CSS クラスが適用されます。列が表示されないのは電話のプロファイルのみという意味です。
以下のコードはこの例を実装します。
C# の場合:
@using Infragistics.Web.Mvc
@model IQueryable<GridDataBinding.Models.Product>
@(Html.Infragistics()
.Grid(Model)
.ID("grid1")
.AutoGenerateColumns(false)
.Columns(col =>
{
col.For(c => c.ProductID).HeaderText("Product ID");
col.For(c => c.Name).HeaderText("Product Name");
col.For(c => c.ProductNumber).HeaderText("Product Number");
})
.Features(feature =>
{
feature.Responsive().ColumnSettings(cs =>
{
cs.ColumnSetting().ColumnKey("ProductID").Classes("hidden-tablet hidden-phone");
cs.ColumnSetting().ColumnKey("ProductNumber").Classes("hidden-phone");
});
})
.DataBind()
.Render())
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
igGrid
コントロールにおける レスポンス Web デザイン (RWD) モード関連の各種構成タスクを説明します。オンラインで表示: GitHub