バージョン

列非表示の構成 (igGrid、RWD モード)

トピックの概要

目的

このトピックでは、コード例を用いて、Responsive Web Design (RWD) モードで igGrid™ コントロール用に列を非表示にする方法について説明します。

前提条件

以下の表は、このトピックを理解するための前提条件として必要な概念、トピック、および記事の一覧です。

このトピックの内容

このトピックは、以下のセクションで構成されます。

列非表示構成の概要

モードには、RWD プロファイルに基づいて列を非表示/表示するための機能があります。以下のスクリーンショットは、同じグリッドの 携帯電話とタブレットの RWD モード プロファイルで列の非表示を比較します。

携帯電話 プロファイル (320 x 480 px) タブレット プロファイル (768 x 1024 px)

デスクトップ プロファイルでは、より多くの列が表示されます。以下の画像は、デスクトップ プロファイルで表示される同じグリッドを示します。

デスクトップ プロファイル (1280 x 1024 px)

列の非表示は、以下の2つの選択可能な方法で構成できます。

  • CSS メディア クエリーに基づいて、 CSS クラス を使用- デフォルトでは、 CSS クラスは CCS 3 メディア クエリを使用します。
  • 指定する列単位では、各個別のプロファイルにおいて各列について非表示か表示かを指定します。

列単位の構成は、インライン カスタム RWD モード を定義した場合、または CSS メディア クエリーに依存しないカスタム RWD モード構成を実装した場合に列の非表示を構成するために唯一使用可能な方法です。

列非表示構成の概要表

以下の表は、RWD モード列の非表示を構成するために使用可能なアプローチを簡単に説明します。このメソッドについては、表の下にある解説も参照してください。

構成タスク 詳細 プロパティ
CSS クラスを使用している列非表示の構成 CSS クラスで定義された列の非表示は、CSS 3 メディア クエリーを使用します。
プロファイル オブジェクトを使用している列非表示の構成 個別の列構成で定義された列の非表示は、InfragisticsMode クラスを使用して行われます。

CSS クラスを使用している列非表示の構成

CSS クラスで定義された列の非表示は、CSS 3 メディア クエリーを使用します。CSS クラスは 列単位で columnSettings プロパティで構成されます。 columnSettings.classes プロパティは、 HTML 要素のクラス属性を設定するルールに従います。単一のクラスまたはドットなしで複数のクラスを設定できます。複数のクラスを設定する場合は スペースで区切ります。

プロパティ設定

以下の表では、目的の構成をプロパティ設定にマップしています。

目的: 使用するプロパティ: 設定の選択肢:
デスクトップ RWD モード プロファイルに対してCSS クラスを使用して列を非表示にします。
  • 列のキー
  • “ui-hidden-desktop”
デスクトップ RWD モード プロファイルに対してCSS クラスを使用して列を表示します。
  • 列のキー
  • “ui-visible-desktop”
タブレット RWD モード プロファイルに対してCSS クラスを使用して列を非表示にします。
  • 列のキー
  • “ui-hidden-tablet”
タブレット RWD モード プロファイルに対してCSS クラスを使用して列を表示にします。
  • 列のキー
  • “ui-visible-tablet”
電話 RWD モード プロファイルに対してCSS クラスを使用して列を非表示にします。
  • 列のキー
  • “ui-hidden-phone”
電話 RWD モード プロファイルに対してCSS クラスを使用して列を表示にします。
  • 列のキー
  • “ui-visible-phone”

この例は、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 モード プロファイルに対して列構成を使用して列を非表示にします。
  • 列のキー
  • true
デスクトップ RWD プロファイルに対して列構成を使用して列を表示します。
  • 列のキー
  • false
タブレット RWD モード プロファイルに対して列構成を使用して列を非表示にします。
  • 列のキー
  • true
タブレット RWD モード プロファイルに対して列構成を使用して列を表示にします。
  • 列のキー
  • false
携帯電話 RWD モード プロファイルに対して列構成を使用して列を非表示にします。
  • 列のキー
  • true
携帯電話 RWD モード プロファイルに対して列構成を使用して列を表示します。
  • 列のキー
  • false

この例は、列構成に基づいて列の非表示を設定する方法を示します。

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())

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

オンラインで表示: GitHub