バージョン

列の非表示の構成 (igGrid)

トピックの概要

目的

このトピックでは、コードで igGrid™ コントロールの列を構成する方法を説明します。

このトピックの内容

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

必要な背景

以下の表は、このトピックの情報を完全に理解するために前提条件を示しています。

列構成の概要

以下の表は、igGrid コントロール列の構成可能なビヘイビアーを示しています。これらのビヘイビアーは、コントロールの columnSettings オプションのプロパティで管理されます。一部のビヘイビア/機能については、チャートに続くブロックに詳細説明と例が記載されています。

注: 以下の表には、列チューザーの非表示に固有のプロパティとメソッドは記載されていません。それらについては、列チューザーを非表示にするトピックをご覧ください。

構成可能なビヘイビアー/機能 構成の詳細 構成プロパティ
列の非表示 (デフォルト) グリッドの初期化時は列は非表示になっています。 hidden
列を完全に非表示にする グリッドの初期化時は列は非表示なっており、ユーザー オプションは何も表示されません。 allowHiding
列の非表示を有効にする ユーザーによる列の非表示を可能にします。 allowHiding
非表示の列インジケーターの幅 ヘッダー内の非表示の列インジケーターの幅 (ピクセル) hiddenColumnIndicatorHeaderWidth
列チューザーの構成 デフォルトの列チューザーの幅 (ピクセル) columnChooserWidth
列チューザーの構成 デフォルトの列チューザーの高さ (ピクセル)。 columnChooserHeight
ドロップダウン アニメーションの期間 ドロップダウン アニメーションの時間 (ミリ秒)。 dropDownAnimationDuration
ドロップダウン ボタンの表示/非表示。 フッター ボタンの表示状態。 showDropDownButton
列チューザーの構成 列チューザー ウィンドウのキャプションのテキスト。 columnChooserCaptionText
列チューザーの構成 ドロップダウン ツール メニューのキャプション (機能セレクター)。 columnChooserDisplayText
ツールチップ テキスト 非表示の列インジケーターのツールチップに表示されるテキスト。 hiddenColumnIndicatorTooltipText
列キーの構成 列キー。これは優先列 ID です。 columnKey
列インデックスの構成 列インデックス。列キーが設定されていない場合に使用できます。 columnIndex

例: 列の非表示 (デフォルト)

以下の図では、Reorder Point 列が初期化時に非表示になっています。

プロパティ設定

以下の表は、プロパティ設定の推奨構成をマップしています。プロパティは igGridHiding オプションからアクセスされます。

プロパティ 設定
columnKey ReorderPoint
allowHiding true
hidden true

コード

JavaScript の場合:

<script type="text/javascript">
$(function () {
    $("#grid1").igGrid({
        autoGenerateColumns: true,
        dataSource: adventureWorks,
        responseDataKey: 'Records',
        features: [
        {
            name: 'Hiding',
            columnSettings: [
                {columnKey: 'ReorderPoint', allowHiding: true, hidden: true}
            ]
        }
    });
});
</script>

Razor の場合:

@Html.Infragistics().Grid(Model)
    .AutoGenerateColumns(true)
    .Features(feature =>{       
        feature.Hiding().ColumnSettings(settings =>    settings.ColumnSetting()
        .ColumnKey("ReorderPoint")
        .AllowHiding(true)
        .Hidden(true));
    }).DataBind().Render()
)

例: 列の完全な非表示

プレビュー

以下の図は Address と BirthDate の 2 つの列が完全に非表示になったグリッドを表示します。これらの列の印がないため、ユーザーは列が非表示でることを認識できません。

プロパティ設定

以下の表は、プロパティ設定の推奨構成をマップしています。プロパティは igGridHiding オプションからアクセスされます。

プロパティ 設定
columnKey true
allowHiding false

コード

JavaScript の場合:

<script type="text/javascript">
$(function () {
    $("#grid1").igGrid({
        autoGenerateColumns: true,
        dataSource: adventureWorks,
        responseDataKey: 'Records',
        features: [
        {
            name: 'Hiding',
            columnSettings: [
                {columnKey: 'Address', allowHiding: false, hidden: true}
                {columnKey: 'BirthDate', allowHiding: false, hidden: true}
            ]
        }
    });
});
</script>

Razor の場合:

@Html.Infragistics().Grid(Model)
    .AutoGenerateColumns(true)
    .Features(feature =>{       
        feature.Hiding().
        .ColumnSettings(settings =>
        {                             
            settings.ColumnSetting().ColumnKey("Address").Hidden(true).AllowHiding(false);                                
            settings.ColumnSetting().ColumnKey("BirthDate").Hidden(true).AllowHiding(false);
        })
    ).DataBind().Render()
)

列の非表示のキャンセル

列の非表示のキャンセルは、columnHiding イベントをキャンセルすることで行います。columnHiding が発生した場合に、列を非表示にしないようにするためにこれが行われます。

概要

以下はプロセスの概念的概要です。

  1. columnHiding イベントの処理
  2. イベントのキャンセル

手順

  1. columnHiding イベントを処理します。

    1. ハンドラー関数を定義します。

      columnHiding イベントが発生した場合に呼び出される関数を定義します。

      JavaScript の場合:

      <script type="text/javascript">     
      function gridColumnHiding (evt, ui) {
      
      };   
      </script>
      
    2. ハンドラーを igGridcolumnHiding イベントに設定します。

      いったんハンドラーを定義したら、columnHiding イベントのハンドラーとして設定する必要があります。jQuery では、これはウィジェットがインスタンス化されるときに行うことができます。ASP.NET MVC では、jQuery on または bind API を使用してイベントを添付する必要があります。また on API の使用は、純粋な jQuery 実装のイベントを添付するためのオプションです。このイベントの型は iggridhidingcolumnhiding です。

      JavaScript の場合:

       $(function () {
           $("#grid1").igGrid({
               autoGenerateColumns: true,
               dataSource: adventureWorks,
               responseDataKey: 'Records',
               features: [
               {
                    name: 'Hiding',
                    columnHiding: gridColumnHiding
               }
               ]
           });
       });
      

      HTML と ASPX の場合:

       $("# grid1").on("iggridhidingcolumnhiding", comboSelectionChanging);
      
  2. イベントをキャンセルします。

    イベントをキャンセルするには、false を返します。

    HTML と JavaScript の場合:

    <script type="text/javascript">
    
        function gridColumnHiding (evt, ui) {
           if (conditionNotMet)
              return false;
         };   
    </script>
    

これらのプロパティの詳細情報は、プロパティ参照セクションのリストを参照してください。

例: 列チューザーの構成

この例では、列チューザーが以下の設定で構成されています。

  • width - 300 ピクセル
  • height - 300 ピクセル
  • caption - New Caption Text
  • 列選択ボタン - New Chooser Text

プレビュー

以下は最終結果のプレビューです。

プロパティ設定

以下の表は、プロパティ設定の推奨構成をマップしています。 プロパティは igGridHiding オプションからアクセスされます。

プロパティ 設定
columnChooserWidth 300
columnChooserHeight 300
columnChooserCaptionText New Caption Text
columnChooserDisplayText New Chooser Text

コード

JavaScript の場合:

<script type="text/javascript">
$(function () {
    $("#grid").igGrid({
          autoGenerateColumns: true,
          dataSource: source,
              features: [
              {
                  name: 'Hiding',
                  columnChooserWidth: 300,
                  columnChooserHeight: 300,
                  columnChooserCaptionText: 'New Caption Text',
                  columnChooserDisplayText: 'New Chooser Text'
              }]
    });
});
</script>

Razor の場合:

@Html.Infragistics().Grid(Model)
    .AutoGenerateColumns(true)
    .Features(feature =>{       
            feature.Hiding()
            .ColumnChooserHeight(300)
            .ColumnChooserWidth(300)
            .ColumnChooserCaptionText("New Caption Text")
            .ColumnChooserDisplayText("New Chooser Text");
        }).DataBind().Render()
)

関連コンテンツ

トピック

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

オンラインで表示: GitHub