このトピックは、コード例を用いて、igGrid
™ コントロールのカスタム レスポンス Web デザイン (RWD) モード プロファイルを作成する方法について説明します。
以下の表は、このトピックを理解するための前提条件として必要な概念、トピック、および記事の一覧です。
igGrid
コントロールの RWD モード機能およびこの機能が提供する機能性について概念的に説明します。igGrid
コントロールでレスポンス Web デザイン (RWD) モードを有効にする方法について説明します。このトピックは、以下のセクションで構成されます。
特定のデバイスをターゲットにしている場合、RWD モード プロファイルのデフォルト プロファイルは自分のニーズを満たさないかもしれません。その場合、カスタム RWD モード プロファイルを定義することになります。
カスタム RWD モード プロファイルをインラインで構成する場合、モードのアクティブ化のために $.ig.ResponsiveMode
クラスの実装を暗黙で使用します。この実装は、ブラウザのウィンドウの高さおよび幅 (window.clientWidth
および window.clientHeight
) に対してプロファイルがアクティブ化されているかどうかクラス (minWidth
, maxWidth
, minHeight
および maxHeight
) プロパティをチェックします。
$.ig.ResponsiveMode
クラスを拡張すると、$.ig.ResponsiveMode.isActive
メソッドを実装し、プロファイルのアクティブ化のために各種ルールを設定できます。
$.ig.ResponsiveMode
クラスを拡張すると、以下のルールが適用されます。
$.ig.<custom_class_name>Mode
と名前をつけなければなりません。このとき クラスを RWD モード プロファイルとして登録する - RWD モード機能の responsiveConfig
プロパティでカスタム モードを宣言します。以下のコードでは、<custom_mode_name>
は、RWD モード プロファイルの実際の名前を表します。
JavaScript の場合:
responsiveConfig: { <custom_mode_name>: “<custom_class_name>” }
RWD モード機能は、responsiveModes
プロパティの 2 つのタイプの間で異なります。オブジェクト プロパティと文字列プロパティです。
以下の表は、カスタム RWD モードの作成で使用可能なオルタナティブを簡単に説明したものです。このメソッドについては、表の下にある解説も参照してください。
タスク | 詳細 | プロパティ |
---|---|---|
カスタム RWD モード プロファイル インラインの作成 | インライン カスタム RWD モード プロファイルの作成では、$.ig.ResponsiveMode クラスの実装を使用します。 |
responsiveModes responsiveModes.<custom_name> |
$.ig.ResponsiveMode クラスを拡張することにより、カスタム RWD モード構成を作成する | $.ig.ResponsiveMode を拡張することにより、$.ig.ResponsiveMode.isActive 関数を実装します。これにより、モードのアクティブ化にルールを設定するための自由度が広がります。 |
responsiveModes responsiveModes.<custom_name> |
インライン カスタム RWD モード プロファイルは、responsiveModes
プロパティで直接定義されます。カスタム RWD モードのプロファイルのインライン構成には responsiveModes
オブジェクトの新規プロパティを定義するプロファイルが含まれます。ここでプロパティ名は RWD モードのカスタム プロファイル名に使用され、プロパティ値はプロファイル オブジェクトとして使用されます。このオブジェクトは、以下のいずれかのプロパティを持ちます: minWidth
、maxWidth
、minHeight
および maxHeight
で、モードのアクティブ化のために幅と高さの境界を定義します。
プロファイル オブジェクトは、その後 RWD モード機能によって使用され、正しい RWD モードのプロファイルを決定しアクティブ化する $.ig.ResponsiveMode
クラスのインスタンスを作成します。
$.ig.ResponsiveMode
クラスには、モードのアクティブ化を確認するための RWD モード機能により呼び出される isActive
メソッドがあります。$.ig.ResponsiveMode.isActive
メソッド実装は minWidth
、maxWidth
、minHeight
および maxHeight
設定を使用し、ブラウザの window.innerWidth
プロパティおよび window.innerHeight
プロパティに対してチェックします。
以下の表では、任意の構成をそれに関係するプロパティ設定にマップしています。
目的: | 使用するプロパティ: | 設定の選択肢: |
---|---|---|
カスタム RWD モード プロファイル インラインの作成 | responsiveModes.<custom_name> |
カスタム応答モードの名前として使用される識別子 例: responsiveModes.galaxyNexusPhone 。このとき、<custom_name> = galaxyNexusPhone |
以下のコードは、customPhone
という名前のインライン カスタム RWD モード プロファイルの定義方法をデモします。customPhone
設定は、minWidth
プロパティと maxWidth
プロパティで幅の範囲を定義するオブジェクトで、画面の幅に基づいてモードをアクティブ化します (それぞれの高さの範囲のプロパティは minHeight
および maxHeight
で、高さのモード ベースの変更はこの例の範囲を超えているため、定義されません).customPhone
で定義されるオプションは $.ig.ResponsiveMode
クラスを初期化するために使用されます。
これらの設定で、Name 列は customPhone
モードで非表示として構成されます。
JavaScript の場合:
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().ResponsiveConfig(config => config.AddExplicitMode("customPhone", m => m.MinWidth(0).MaxHeight(767)))
.ColumnSettings(cs =>
{
cs.ColumnSetting().ColumnKey("Name").Configuration(conf => {
conf.AddColumnModeConfiguration("customPhone", c => c.Hidden(true));
});
});
})
.DataBind()
.Render())
RWD モードのカスタム プロファイルのインライン定義がプロファイルの決定に適さない場合があります。これは、Twitter Bootstrap CSS クラスがアクティブなプロファイルを決定するために使用される $.ig.BootstrapMode
クラスの場合です。(Twitter Bootstrap は CSS Media Queries を使用して、どのスタイルが RWD モードに関わる状況で要素に適用されるかを決定します).$.ig.ResponsiveMode
クラスを拡張すると、カスタム ロジックを定義し、$.ig.ResponsiveMode.isActive
メソッドを実装することによりプロファイルのアクティブ化を決定できます (たとえば、ブラウザ エージェント文字列はチェックできますが推奨されません)このメソッドはブール値を返します。プロファイルがアクティブである場合は true で、そうでない場合は false です。
カスタム プロファイルは、いくつかの手順で作成されます。
$.ig.ResponsiveMode
クラスを展開します。このクラスは、 minWidth
、 maxWith
、 minHeight
、 maxHeight
の設定を持ち、isActive
と呼ばれる関数は、設定で定義されたモードが現在アクティブである場合は true を返し、そうでない場合は false を返します。クラスは $.ig.<custom_class_name>Mode
と名前をつけなければなりません。このとき <custom_class_name>
はクラスの名前です。機能の responsiveConfig
プロパティでカスタム プロパティを宣言します。例:
JavaScript の場合:
responsiveConfig: { <custom_mode_name>: “<custom_class_name>” }
<custom_mode_name>
はプロファイルの名前であり、列の非表示やテンプレートに切り替えに使用します。
カスタムプロファイルを使用して、列の非表示やテンプレートの切り替えを構成します。
columnSettings.configuration.<custom_mode_name>
プロパティを使用します。columnSettings.configuration
を使用します。以下の表では、目的のタスクをプロパティ設定にマップしています。
目的: | 使用するプロパティ: | 設定の選択肢: |
---|---|---|
$.ig.ResponsiveMode クラスを拡張することにより、カスタム RWD モード プロファイルを作成します。 |
responsiveModes.\<custom_name\> |
$.ig.ResponsiveMode を拡張し名前のサフィックス Mode を持つ $.ig 名前空間におけるクラス名。 |
以下のコードは、$.ig.ResponsiveMode
クラスを拡張するクラス $.ig.CustomPhoneMode
を定義します。minWidth
値および maxWidth
値は、幅で RWD モード切り替えを構成するために設定されます。isActive 関数は、基本クラスの isActive
、つまり $.ig.ResponsiveMode.isActive
の実装を呼び出します (実環境では、基本実装を呼び出すのでなくいくつかのカスタム ロジックを置くことになります)。
注: このコードは、JavaScript および MVC 実装で共通です。
JavaScript の場合:
$.ig.loader(function () {
$.ig.CustomPhoneMode = $.ig.CustomPhoneMode || $.ig.ResponsiveMode.extend({
settings: {
minWidth: 0,
maxWidth: 767
},
init: function (options) {
this.settings = $.extend(true, {}, $.ig.CustomPhoneMode.prototype.settings, options);
this._super(this.settings);
return this;
},
isActive: function () {
return this._super();
}
});
});
以下のコードは、custom_phone
という名前で「CustomPhone」値を持つ responsiveModes
オブジェクトの新しいプロパティを定義します。 RWD モード機能は、$.ig.CustomPhoneMode
という名前のクラスを探します。これは、RWD モード プロファイルを識別しアクティブ化するために使用されます。
これらの設定で、Name
列は custom_phone
モードで非表示として構成されます。
JavaScript の場合:
$.ig.loader(function () {
$("#grid1").igGrid({
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: "Name",
configuration: {
custom_phone: {
hidden: true
}
}
}
],
responsiveModes: {
custom_phone: "CustomPhone"
}
}
]
});
});
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().ResponsiveConfig(config => config.AddPredefinedMode("custom_phone", "CustomPhone"))
.ColumnSettings(cs =>
{
cs.ColumnSetting().ColumnKey("Name").Configuration(conf => {
conf.AddColumnModeConfiguration("custom_phone", c => c.Hidden(true));
});
});
})
.DataBind()
.Render())
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
列非表示の構成 (igGrid、RWD モード): このトピックでは、コード例を用いて、レスポンス Web デザイン (RWD) モードで igGrid
コントロール用に列を非表示にする方法について説明します。
列テンプレートの構成 (igGrid、RWD モード): このトピックは、コード例を用いて igGrid
コントロールの各レスポンス Web デザイン (RWD) モード プロファイルに対して列テンプレートを定義する方法、およびアクティブな RWD モードの切り替え時のテンプレートの自動変更を構成する方法について説明します。
オンラインで表示: GitHub