バージョン

列のリサイズ

WebDataGrid™ によって列をリサイズできます。列をリサイズするには、エンド ユーザーは列のヘッダーの右端をクリックしてドラッグします。ドラッグの間列の端を示すために線が表示します。ストップをドラッグする間だけ列が列自身をリサイズします。

デザイナーを介して、または Microsoft® Visual Studio® [プロパティ] ウィンドウを使用する、または以下のコードを使用して WebDataGrid で列のリサイズの動作を追加できます:

Visual Basic の場合:

WebDataGrid1.Behaviors.CreateBehavior(Of Infragistics.Web.UI.GridControls.ColumnResizing)()

C# の場合:

WebDataGrid1.Behaviors.CreateBehavior<Infragistics.Web.UI.GridControls.ColumnResizing>();

リサイズの動作方法は WebDataGrid の列の幅に対して何が設定されているかによって異なります。設定できるサイズはピクセルとパーセントの 2 タイプあります。デフォルトで、WebDataGrid の列の幅は空で、パーセントのサイズ設定に相当します。

パーセントベースのリサイズ

WebDataGrid の列すべてがパーセント幅の場合、すべての列がコントロール内に収まるようにリサイズが行われます。エンド ユーザーがひとつの列をリサイズすると、すべてのその他の列もサイズが変わり、必要な比率で収まります。

たとえば、5 列あり、各列が WebDataGrid の幅の 20% を使用します。エンド ユーザーがひとつの列のサイズを 30 % の幅に変更します。WebDataGrid の合計幅の残りの 70 % が比率の値に基づいてその他の列で均等に分割されます。したがって 4 列ありそれぞれの幅が等しくなり、70/4 の幅つまり約 17% が指定され、使用される幅の合計が 100% になります。

ピクセルベースのリサイズ

ピクセル サイズの場合、ひとつの列のサイズが変わっても残りの列は幅を保持します。列幅の合計がコントロールの幅を超える場合、スクロールバーが表示します。

注: 列のリサイズを有効にした時に、パーセント幅とピクセル幅を一緒に使用することは推奨しません。列が予想外にリサイズされるためです。その時点で、リサイズが発生すると各列の幅を決定するのはブラウザ次第です。

最小幅/最大幅

列で最小幅と最大幅を設定できます。これはこれらの値を超えてリサイズされることを制限します。列の幅を制限するには ColumnResizing 動作の 列のリサイズ設定 を追加することが必要です。列のリサイズ設定には、列に最小値または最大値をそれぞれ設定できる MinimumWidth および MaximumWidth プロパティがあります。

注: パーセントの最小値と最大値を設定できません。さらに、パーセント列は最小/最大の制限を無視します。

複数列のリサイズ

一度に複数の列をリサイズできます。複数列を選択して、ひとつの列をドラッグしてリサイズすることができます。その列のリサイズが完了すると、すべての選択された列を同じ幅にリサイズできます。選択されたひとつの列をリサイズするだけですべての選択された列がリサイズされます。選択されていない列をリサイズすると、その列のみをリサイズします。

注: 複数列のリサイズには、複数列の  Selection 動作を有効にする必要があります。これを実行する詳細は、 選択を参照してください。

列のリサイズを有効化

始める前に

WebDataGrid™ コントロールの列はリサイズ可能です。列のリサイズを可能にするには、 ColumnResizing 動作を可能にする必要があります。列幅はデフォルトで空であるため、列のリサイズのみを有効すると、WebDataGrid はパーセントを使用してリサイズします。

達成すること

WebDataGrid のすべての列でピクセルベースの列のリサイズを有効にする方法を学習します。さらに、主要なキー列に最小サイズを設定します。

次の手順を実行します

  1. WebDataGrid を SqlDataSource コンポーネントにバインドして、Customers テーブルからデータを取得します。CustomerID、CompanyName、ContactName、および ContactTitle データを取得します。実行についての詳細は、 WebDataGrid で開始を参照してください。

  2. Microsoft® Visual Studio™ プロパティ ウィンドウで、 Columns プロパティを指定して、省略記号 (…​) ボタンをクリックして、[列エディタ] ダイアログを起動します。

  3. コントロールの列ごとにピクセル幅を設定します。これによってピクセルベースでリサイズすることが可能となります。

    1. [選択されたフィールド] 領域から CustomerID 列を選択します。

    2. プロパティで、[幅] を 100px に設定します。

    3. 列 CompanyName、ContactName および ContactTitle で手順 a と b を繰り返します。

WebDataGrid Enabling Column Resizing 01.png
  1. [OK] をクリックしてこのダイアログを閉じます。

  2. Behaviors プロパティを指定して、省略記号 (…​) ボタンをクリックし、[動作エディタ] ダイアログを起動します。

  3. 列リサイズ動作をチェックして有効にします。

  4. 動作のプロパティで、 ColumnSettings プロパティを指定して、省略記号 (…​) ボタンをクリックし列設定デザイナを起動します。

  5. [追加] をクリックして列設定を追加します。

  6. ColumnKey プロパティを CustomerID に設定します。

  7.   MinimumWidth プロパティを 100 に設定します。これは列が 100 ピクセル未満にリサイズされることを制限します。 MaximumWidth プロパティを -1 のままにすることができ、エンド ユーザーは列を任意のサイズに拡張することができます。

WebDataGrid Enabling Column Resizing 02.png
  1. [適用]、そして [OK] をクリックします。

  2. [適用]、そして [OK] をクリックして変更を認めてダイアログを閉じます。

  3. アプリケーションを実行します。WebDataGrid は 4 列それぞれを 100 ピクセルで表示します。CustomerID 列は最小幅を 100 ピクセルに制限されますがすべての列はリサイズ可能です。

WebDataGrid Enabling Column Resizing 03.png