このトピックでは、コード例を用いて、Responsive Web Design (RWD) モードで igGrid™ コントロール用に列を非表示にする方法について説明します。
以下の表は、このトピックを理解するための前提条件として必要な概念、トピック、および記事の一覧です。
igGrid コントロールの RWD モード機能およびこの機能が提供する機能性について概念的に説明します。igGrid コントロールでレスポンス Web デザイン (RWD) モードを有効にする方法について説明します。このトピックは、以下のセクションで構成されます。
モードには、RWD プロファイルに基づいて列を非表示/表示するための機能があります。以下のスクリーンショットは、同じグリッドの 携帯電話とタブレットの RWD モード プロファイルで列の非表示を比較します。
| 携帯電話 プロファイル (320 x 480 px) | タブレット プロファイル (768 x 1024 px) |
|---|---|
 |
 |
デスクトップ プロファイルでは、より多くの列が表示されます。以下の画像は、デスクトップ プロファイルで表示される同じグリッドを示します。
デスクトップ プロファイル (1280 x 1024 px)
列の非表示は、以下の２つの選択可能な方法で構成できます。
列単位の構成は、インライン カスタム RWD モード を定義した場合、または CSS メディア クエリーに依存しないカスタム RWD モード構成を実装した場合に列の非表示を構成するために唯一使用可能な方法です。
以下の表は、RWD モード列の非表示を構成するために使用可能なアプローチを簡単に説明します。このメソッドについては、表の下にある解説も参照してください。
| 構成タスク | 詳細 | プロパティ |
|---|---|---|
| CSS クラスを使用している列非表示の構成 | CSS クラスで定義された列の非表示は、CSS 3 メディア クエリーを使用します。 | |
| プロファイル オブジェクトを使用している列非表示の構成 |
個別の列構成で定義された列の非表示は、InfragisticsMode クラスを使用して行われます。
|
|
CSS クラスで定義された列の非表示は、CSS 3 メディア クエリーを使用します。CSS クラスは 列単位で columnSettings プロパティで構成されます。 columnSettings.classes プロパティは、 HTML 要素のクラス属性を設定するルールに従います。単一のクラスまたはドットなしで複数のクラスを設定できます。複数のクラスを設定する場合は スペースで区切ります。
以下の表では、目的の構成をプロパティ設定にマップしています。
| 目的: | 使用するプロパティ: | 設定の選択肢: |
|---|---|---|
| デスクトップ RWD モード プロファイルに対してCSS クラスを使用して列を非表示にします。 |
|
|
| デスクトップ RWD モード プロファイルに対してCSS クラスを使用して列を表示します。 |
|
|
| タブレット RWD モード プロファイルに対してCSS クラスを使用して列を非表示にします。 |
|
|
| タブレット RWD モード プロファイルに対してCSS クラスを使用して列を表示にします。 |
|
|
| 電話 RWD モード プロファイルに対してCSS クラスを使用して列を非表示にします。 |
|
|
| 電話 RWD モード プロファイルに対してCSS クラスを使用して列を表示にします。 |
|
この例は、CSS クラスに基づいて列の非表示を設定する方法をデモします。
ProductID 列は、同時に ui-hidden-tablet クラスと ui-hidden-phone クラスを使用するよう構成されます (スペースで区別して行います)。タブレットや携帯電話のプロファイルでは表示されない、など
ProductNumber 列は ui-hidden-phone クラスを使用するよう構成されます。携帯電話のプロファイルでは表示されない、など。
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: "ui-hidden-tablet ui-hidden-phone"
},
{
columnKey: "ProductNumber",
classes: "ui-hidden-phone"
}
]
}
]
});
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("ui-hidden-tablet ui-hidden-phone");
cs.ColumnSetting().ColumnKey("ProductNumber").Classes("ui-hidden-phone");
});
})
.DataBind()
.Render())
各列の構成で定義される列の非表示は、columnSettings.configuration プロパティ内の InfragisticsMode クラスで行われます。これは、プロパティが RWD モードのプロファイル名であり、その値は列の可視性を構成するための hidden ブール値プロパティを持つオブジェクトです。
以下の表では、目的の構成をプロパティ設定にマップしています。
| 目的: | 使用するプロパティ: | 設定の選択肢: |
|---|---|---|
| デスクトップ RWD モード プロファイルに対して列構成を使用して列を非表示にします。 |
|
|
| デスクトップ RWD プロファイルに対して列構成を使用して列を表示します。 |
|
|
| タブレット RWD モード プロファイルに対して列構成を使用して列を非表示にします。 |
|
|
| タブレット RWD モード プロファイルに対して列構成を使用して列を表示にします。 |
|
|
| 携帯電話 RWD モード プロファイルに対して列構成を使用して列を非表示にします。 |
|
|
| 携帯電話 RWD モード プロファイルに対して列構成を使用して列を表示します。 |
|
この例は、列構成に基づいて列の非表示を設定する方法を示します。
ProductID 列は、デスクトップ プロファイル (デフォルト) で表示され、タブレットおよび携帯電話のプロファイルでは非表示になります。
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",
configuration: {
desktop: {
hidden: false
},
tablet: {
hidden: true
},
phone: {
hidden: true
}
}
}
]
}
]
});
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").Configuration(conf => {
conf.AddColumnModeConfiguration("desktop", c => c.Hidden(false));
conf.AddColumnModeConfiguration("tablet", c => c.Hidden(true));
conf.AddColumnModeConfiguration("phone", c => c.Hidden(true));
});
});
})
.DataBind()
.Render())
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
行および列テンプレートの構成 (igGrid、RWD モード): このトピックは、コード例を用いて igGrid コントロールの各 レスポンス Web デザイン (RWD) モード プロファイルに対して行と列を定義する方法、およびアクティブな RWD モードの切り替え時のテンプレートの自動変更を構成する方法について説明します。
カスタム レスポンス Web デザイン (RWD) プロファイルの作成 (igGrid): このトピックは、コード例を使用して、igGrid コントロールのカスタム レスポンシブ Web デザイン (RWD) モード プロファイルを作成する方法について説明します。
オンラインで表示: GitHub