バージョン

行セレクターの構成 (igHierarchicalGrid)

トピックの概要

目的

コード例を使用して、igHierarchicalGrid™ コントロールの行セレクター機能を構成する方法を説明します。

前提条件

以下は、このトピックを理解するための前提条件として必要なトピックを示しています。

このトピックの内容

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

行選択構成の概要

行選択構成チャート

行選択機能の構成可能な側面を示します。これらの側面は、igGridRowSelectors ウィジェットの関連するプロパティを通じて管理されます。ウィジェットの動きと機能についての詳細な説明といくつかの例を表に続けます。

構成可能な要素 詳細 プロパティ
複数列の選択 デフォルトでは、複数列の選択は有効化されています。これは igGridSelection コントロールを付いじてコントロールされます。 multipleSelection (igGridSelection™)
チェックボックスのついた選択 行選択列のチェックボックスを有効にします。 enableCheckBoxes
行の番号付け 有効化されると、行セレクター列の行番号付けが可能です。 enableRowNumbering
行番号開始値 行番号がカスタム値から開始されることを許可 rowNumberingSeed
行セレクター列の幅 行セレクター列の幅を設定する rowSelectorColumnWidth
構成には選択が必要です。 選択機能が無効になっている場合には、コントロールが例外をスローします。 requireSelection

注: RowSelectors の動作はレイアウトによって設定されます。レイアウトは一度に 1 つのみ選択できます。他のレイアウトの行を選択 / チェックする場合、以前のレイアウトで選択した行は選択解除になります。詳細については、既知の問題と制限 (igHierarchicalGrid) トピックを参照してください。

複数行選択を有効にする

概要

グリッドに対する選択機能を初期化することで、igHierarchicalGrid コントロールの行選択機能を用いたセルまたは行の選択が可能になります。これは自動的に選択機能を初期化するわけではないので、必要な場合にそれを有効化する必要があります。行選択は選択機能なしでも、たとえば行番号付けに使うことができます。

例

下図において、行選択と選択機能は有効になっています。赤い四角形は行セレクターの列を表します。

コード

JavaScript の場合:

$(function () {
    $("#grid").igHierarchicalGrid({
        initialDataBindDepth: 1,
        dataSource: data,
        dataSourceType: "json",
        responseDataKey: "Records",
        autoGenerateColumns: true,
        autoGenerateLayouts: true,
        primaryKey: "ID",
        features: [
            {
                name: "RowSelectors",
                inherit: true
            },
            {
                name: "Selection",
                multipleSelection: true,
                mode: "row"
            }
        ]
    });
});

ASPX の場合:

<%= Html.Infragistics()
        .Grid(Model)
        .ID("grid")
        .Features(features =>
            {
                features.RowSelectors().Inherit(true);
                features.Selection().Mode(SelectionMode.Row).MultipleSelection(true);
                features.Paging().Type(OpType.Local).PageSize(5);
            })
        .AutoGenerateColumns(true)
        .AutoGenerateLayouts(true)
        .DataBind()
        .Render()
%>

選択チェックボックスを追加する

概要

チェックボックスは、igGridRowSelectors コントロールの enableCheckBoxes プロパティを true に設定することで追加されます。チェックボックスが有効になっている時は複数選択を使用することを推奨します。これにより、ユーザーは Ctrl キーを押し続けなくても複数行を選択できるようになります。行セレクター チェックボックスが有効になっている時は、複数選択がページをまたいで続きます。

例

下図は、行セレクター チェックボックスが有効な階層的グリッドを示します。赤マルで囲まれた部分は最初の2つのマスター行の上にあるチェックボックスを示します。

コード

HTML の場合:

<script type="text/javascript">
    $(function () {
        $("#grid").igHierarchicalGrid({
            initialDataBindDepth: 1,
            dataSource: data,
            dataSourceType: "json",
            responseDataKey: "Records",
            autoGenerateColumns: true,
            autoGenerateLayouts: true,
            primaryKey: "ID",
            features: [
                {
                    name: "RowSelectors",
                    enableCheckBoxes: true
                    inherit: true
                },
                {
                    name: "Selection",
                    multipleSelection: true,
                    mode: "row"
                },
                {
                    name: "Paging",
                    type: "local"
                }
            ]
        });
    });
</script>

ASPX の場合:

<%= Html.Infragistics()
    .Grid(Model)
    .ID("grid")
    .Features(features =>
        {
            features.RowSelectors().EnableCheckBoxes(true).Inherit(true);
            features.Selection().Mode(SelectionMode.Row).MultipleSelection(true);
            features.Paging().Type(OpType.Local);
        })
    .AutoGenerateColumns(true)
    .AutoGenerateLayouts(true)
    .DataBind()
    .Render()
%>

行の番号付けを有効にする

概要

グリッド内の行セレクター列にあるすべての行に連続した行番号をつけることもできます。これは igGridRowSelectors ウィジェットの rowNumbering オプションを通じて管理されます。

例

次のスクリーンショットは、行番号が有効にされたグリッドの表示を示しています。

コード

HTML の場合:

<script type="text/javascript">
    $(function () {
        $("#grid").igHierarchicalGrid({
            initialDataBindDepth: 1,
            dataSource: data,
            dataSourceType: "json",
            responseDataKey: "Records",
            autoGenerateColumns: true,
            autoGenerateLayouts: true,
            primaryKey: "ID",
            features: [
                {
                    name: "RowSelectors",
                    enableRowNumbering: true
                    inherit: true
                },
                {
                    name: "Selection",
                    multipleSelection: true,
                    mode: "row"
                }
            ]
        });
    });
</script>

ASPX の場合:

<%= Html.Infragistics()
    .Grid(Model)
    .ID("grid")
    .Features(features =>
        {
            features.RowSelectors().EnableRowNumbering(true).Inherit(true);
            features.Selection().Mode(SelectionMode.Row).MultipleSelection(true);
            features.Paging().Type(OpType.Local);
        })
    .AutoGenerateColumns(true)
    .AutoGenerateLayouts(true)
    .DataBind()
    .Render()
%>

シードをデフォルト番号付けに構成する

概要

連続した行番号の先頭番号は、シード値を手動で設定することで行えます。これはigGridRowSelectors ウィジェットの rowNumberingSeed オプションを通じて管理されます。

例

以下のスクリーンショットは、オフセット行番号付けされたグリッドの見え方を示しています。

コード

HTML の場合:

<script type="text/javascript">
    $(function () {
        $("#grid").igHierarchicalGrid({
            initialDataBindDepth: 1,
            dataSource: data,
            dataSourceType: "json",
            responseDataKey: "Records",
            autoGenerateColumns: true,
            autoGenerateLayouts: true,
            primaryKey: "ID",
            features: [
                {
                    name: "RowSelectors",
                    enableRowNumbering: true,
                    rowNumberingSeed: 9,
                    inherit: true
                },
                {
                    name: "Selection",
                    multipleSelection: true,
                    mode: "row"
                }
            ]
        });
    });
</script>

ASPX の場合:

<%= Html.Infragistics()
    .Grid(Model)
    .ID("grid")
    .Features(features =>
        {
            features.RowSelectors().Inherit(true)
                .EnableRowNumbering(true).RowNumberingSeed(9);
            features.Selection().Mode(SelectionMode.Row)
                .MultipleSelection(true);
            features.Paging().Type(OpType.Local);
        })
    .AutoGenerateColumns(true)
    .AutoGenerateLayouts(true)
    .DataBind()
    .Render()
%>

行セレクター列の幅を設定する

概要

igGridRowSelectors ウィジェットの rowSelectorColumnWidth オプションで行セレクター列の幅を設定します。幅の設定はピクセル (75px) かまたはパーセント (10%) で行われます。値が設定されていなければ、ウィジェットは自動的に適切な値に幅を設定します。

例

次のスクリーンショットは、グリッドの行セレクター列の描画を 75 ピクセルの幅に設定しています。幅が拡大されて赤い矢印と線が強調されています。

コード

HTML の場合:

<script type="text/javascript">
    $(function () {
        $("#grid").igHierarchicalGrid({
            initialDataBindDepth: 1,
            dataSource: data,
            dataSourceType: "json",
            responseDataKey: "Records",
            autoGenerateColumns: true,
            autoGenerateLayouts: true,
            primaryKey: "ID",
            features: [
                {
                    name: "RowSelectors",
                    enableRowNumbering: true,
                    rowSelectorColumnWidth: "75px",
                    inherit: true
                },
                {
                    name: "Selection",
                    multipleSelection: true,
                    mode: "row"
                }
            ]
        });
    });
</script>

ASPX の場合:

<%= Html.Infragistics()
    .Grid(Model)
    .ID("grid")
    .Features(features =>
        {
            features.RowSelectors().Inherit(true)
                .EnableRowNumbering(true).RowSelectorsColumnWidth("75px");
            features.Selection().Mode(SelectionMode.Row).MultipleSelection(true);
            features.Paging().Type(OpType.Local);
        })
    .AutoGenerateColumns(true)
    .AutoGenerateLayouts(true)
    .DataBind()
    .Render()
%>

関連コンテンツ

トピック

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

サンプル

このトピックについては、以下のサンプルも参照してください。

  • 行セレクター: igHierarchicalGrid で RowSelectors を使用する用法について説明します。

オンラインで表示: GitHub