WebHierarchicalDataGrid™ コントロールのページング テンプレート機能で、ページャーのルック アンド フィールをユーザーの仕様にカスタマイズできます。コントロールをテンプレートに追加できますが、ページャー テンプレートの使用では、ページングメカニズムを手動で操作する必要があります。
2 つのボタンとドロップダウン リストを使用して、WebHierarchicalDataGrid の親バンドのページングを設定します。2 つのボタンは前ページと次ページへの移動を処理しますが、ドロップダウン リストは選択したページに移動します。
WebHierarchicalDataGrid を WebHierarchicalDataSource™ コンポーネントにバインドし、Categories および Products テーブルからデータを取得します。この詳細は、 階層的なデータ ソースにバインドトピックを参照してください。
Microsoft® Visual Studio™ [プロパティ] ウィンドウで、 Bands プロパティを指定して、省略記号 (…) ボタンをクリックし、[WebHierarchicalDataGrid バンドの編集] ダイアログを起動します。
親バンドでは、Behaviors プロパティを指定して、省略記号 (…) ボタンをクリックし、[動作エディター] ダイアログを起動します。
この動作を追加して有効にするには、左のリストから ページング の隣りのチェックボックスをチェックします。このトピックでは、PageSize は 3 に設定されます。EnableInheritance プロパティは、子バンドにページングを設定するために有効にできます。
このプロパティで、 PagingClientEvents を展開し、イベント ハンドラ名 WebHierarchicalDataGrid1_PageIndexChanged を入力して PageIndexChanged イベントを処理します。
[適用] そして [OK] ボタンをクリックしてエディターを閉じます。
WebHierarchicalDataGrid を右クリックして編集テンプレートを強調表示します。ページャー テンプレートのオプションが表示されます。
注： 複数の動作テンプレートを使用している場合、編集テンプレートのサブメニューのセクションとして動作テンプレートが表示されます。
コンテキスト メニューからページャー テンプレートを選択します。WebHierarchicalDataGrid 表示は、テンプレート編集表示に変わります。
注： 追加した動作に基づき、ページャー テンプレートに加えて他のテンプレートが表示されます。
2 つの HTML ボタンとひとつの ASP.NET DropDownList コントロールをテンプレートに追加します。
2 つのボタンの間にドロップダウン リストを配置します。
ドロップダウンリストの前のボタンの値を「前へ」に設定し、その ID を PrevButton に設定します。
2 番目のボタンの値を「次へ」に設定し、その ID を NextButton に設定します。
各ボタンをダブルクリックしてそれらにイベント ハンドラを追加します。
ドロップダウン リストに IndexChanged という名前のクライアント側のハンドラを追加します。ドロップダウンから値を選択する場合、これは WebHierarchicalDataGrid の手動ページングを処理します。ドロップダウン リストの HTML は以下のように表示されるはずです:
HTML の場合:
<asp:DropDownList ID="DropDownList1" runat="server" onchange="return IndexChanged()"> </asp:DropDownList>
WebHierarchicalDataGrid を再び右クリックして、[テンプレート編集の終了] を選択します。通常のグリッド表示に戻ります。 .
WebHierarchicalDataGrid コントロールの RowIslandDataBinding イベントでデータのページ数で DropDownList コントロールを生成します。
ページャー テンプレートでドロップダウン リストへの参照を取得します。これはテンプレート内のコントロールのコンテナである PagerTemplateContainer へのアクセスと、テンプレート内のコントロールを見つける必要があります。
ページ数でドロップダウン リストを生成します。RowIslandDataBinding イベントを処理して以下のコードを書き込みます。
Visual Basic の場合：
AddHandler Me.WebHierarchicalDataGrid1.RowIslandDataBinding, AddressOf WebHierarchicalDataGrid1_RowIslandDataBinding
Protected Sub WebHierarchicalDataGrid1_RowIslandDataBinding(ByVal sender As Object, ByVal e As RowIslandEventArgs)
If e.RowIsland.DataMember = "SqlDataSource1_DefaultView" Then
If Not IsPostBack Then
Dim list1 As DropDownList = DirectCast(e.RowIsland.Behaviors.Paging.PagerTemplateContainer.FindControl("DropDownList1"), DropDownList)
'簡素化のため、いくつかのリスト項目をハードコーディングしています。本番アプリケーションでは、
'ロジックを使用して、どれぐらいのページ数がリストに追加されるべきかを計算します。
For i As Integer = 1 To 3
list1.Items.Add(i.ToString())
Next
End If
End If
End Sub
C# の場合：
this.WebHierarchicalDataGrid1.RowIslandDataBinding += new RowIslandEventHandler(WebHierarchicalDataGrid1_RowIslandDataBinding);
protected void WebHierarchicalDataGrid1_RowIslandDataBinding(object sender, RowIslandEventArgs e)
{
if (e.RowIsland.DataMember == "SqlDataSource1_DefaultView")
{
if (!IsPostBack)
{
DropDownList list1 = (DropDownList)e.RowIsland.Behaviors.Paging.PagerTemplateContainer.FindControl("DropDownList1");
//簡素化のため、いくつかのリスト項目を
//ハードコーディングしています。本番アプリケーションでは、
//ロジックを使用して、どれぐらいのページ数が
//リストに追加されるべきかを計算します。
for (int i = 1; i $$<=$$ 3; i++)
{
list1.Items.Add(i.ToString());
}
}
}
}
ドロップダウン リストの IndexChanged イベント ハンドラで WebHierarchicalDataGrid を手動でページングします。
WebHierarchicalDataGrid への参照を取得します。
ドロップダウン リストから選択した値に基づき WebHierarchicalDataGrid をページします。
注： DropDownList コントロールのクライアント ID に注意してください。これは、コントロールが複数のコンテナ コントロール内に配置されているからです（別名：テンプレート）。この例では、クライアント ID はハードコードされます。本番アプリケーションでは、ランタイムにこの ID を動的に取得します。
JavaScript の場合：
function IndexChanged()
{
var dropdownlist = document.getElementById("WebHierarchicalDataGrid1_ctl00_ctl01_DropDownList1");
var grid = $find("WebHierarchicalDataGrid1");
var parentGrid = grid.get_gridView();
var newValue = dropdownlist.selectedIndex;
parentGrid.get_behaviors().get_paging().set_pageIndex(newValue);
}
Prev ボタン コントロールのクライアント側の Click イベント ハンドラを使用して WebHierarchicalDataGrid をページングします。
WebHierarchicalDataGrid への参照を取得します。
ドロップダウン リストへの参照を取得します。
インデックスを少なくしてチェックすれば選択可能なページの境界を超えません。
次ページに移ります。
JavaScript の場合：
var grid = $find("WebHierarchicalDataGrid1");
var parentGrid = grid.get_gridView();
var dropdownlist = document.getElementById("WebHierarchicalDataGrid1_ctl00_ctl01_DropDownList1");
if (parentGrid.get_behaviors().get_paging().get_pageIndex() > 0) {
parentGrid.get_behaviors().get_paging().set_pageIndex(parentGrid.get_behaviors().get_paging().get_pageIndex() - 1);
}
ページ インデックスを増すことを除き、Next ボタン イベント ハンドラに同じことを行います。
JavaScript の場合：
var grid = $find("WebHierarchicalDataGrid1");
var parentGrid = grid.get_gridView();
var dropdownlist = document.getElementById("WebHierarchicalDataGrid1_ctl00_ctl01_DropDownList1");
if (parentGrid.get_behaviors().get_paging().get_pageIndex() < parentGrid.get_behaviors().get_paging().get_pageCount() - 1) {
parentGrid.get_behaviors().get_paging().set_pageIndex(parentGrid.get_behaviors().get_paging().get_pageIndex() + 1);
}
ユーザーが手順 5 で追加した WebHierarchicalDataGrid1_PageIndexChanged クライアント側イベントの本文にコードを追加します。
JavaScript の場合：
var grid = $find("WebHierarchicalDataGrid1");
var parentGrid = grid.get_gridView();
var dropdownlist = document.getElementById("WebHierarchicalDataGrid1_ctl00_ctl01_DropDownList1");
dropdownlist.options[parentGrid.get_behaviors().get_paging().get_pageIndex()].selected = true;
アプリケーションを実行します。WebHierarchicalDataGrid のページャーの親バンドは 2 つのボタンとひとつのドロップダウン リストで構成され、それぞれはページングで使用できます。
