![WebDataGrid Using Custom Paging Template 02.png](images/WebDataGrid_Using_Custom_Paging_Template_02.png)
WebDataGrid™ コントロールのページング テンプレート機能で、ページャーのルック アンド フィールをユーザーの仕様にカスタマイズできます。コントロールをテンプレートに追加できますが、ページャー テンプレートの使用では、ページング メカニズムを手動で操作する必要があります。
2 つのボタンとひとつのドロップダウン リストを使用して WebDataGrid ページングを設定します。2 つのボタンは前ページと次ページへの移動を処理しますが、ドロップダウン リストは選択したページに移動します。
SqlDataSource コンポーネントを使用して WebDataGrid を Customers テーブルにバインドします。これについての詳細は、 WebDataGrid で開始を参照してください。
Microsoft® Visual Studio™ プロパティ ウィンドウで、Behaviors プロパティを指定して、省略記号 (…) ボタンをクリックし、[動作エディター] ダイアログを起動します。
この動作を追加して有効にするには、左のリストから Paging の隣りのチェックボックスをチェックします。
プロパティで、 PagingClientEvents を展開し、イベント ハンドラ名 WebDataGrid1_PageIndexChanged を入力して PageIndexChanged イベントを処理します。
[適用] そして [OK] ボタンをクリックしてエディターを閉じます。
WebDataGrid を右クリックして編集テンプレートを強調表示します。ページャー テンプレートのオプションが表示されます。
コンテキスト メニューからページャー テンプレートを選択します。WebDataGrid 表示は、テンプレート編集表示に変わります。
2 つの HTML ボタンとひとつの ASP.NET DropDownList コントロールをテンプレートに追加します。
2 つのボタンの間にドロップダウン リストを配置します。
ドロップダウン リストの前のボタンの値を Prev に設定し、その ID を PrevButton に設定します。
2 番目のボタンの値を Next に設定し、その ID を NextButton に設定します。
各ボタンをダブルクリックしてそれらにイベント ハンドラを追加します。
ドロップダウン リストに IndexChanged という名前のクライアント側ハンドラを追加します。ドロップダウンから値を選択する場合、これは WebDataGrid の手動ページングを処理します。ドロップダウン リストの HTML は以下のように表示されるはずです。
HTML の場合:
<asp:DropDownList ID="DropDownList1" runat="server" onchange="return IndexChanged()"> </asp:DropDownList>
WebDataGrid を再び右クリックして、[テンプレート編集の終了] を選択します。通常のグリッド表示に戻ります。
ページのロード イベントにデータのページ数を DropDownList コントロールに移植します。
ページャー テンプレートでドロップダウン リストへの参照を取得します。これはテンプレート内のコントロールのコンテナである PagerTemplateContainer へのアクセスと、テンプレート内のコントロールを見つける必要があります。
ページ数でドロップダウン リストを移植します。91 のレコードを持つ Customers データを取得しているので、デフォルト ページ サイズは 8 で、データは 12 ページ必要です。
Visual Basic の場合:
If Not Page.IsPostBack Then Dim list1 As DropDownList = DirectCast(Me.WebDataGrid1.Behaviors.Paging.PagerTemplateContainer.FindControl("DropDownList1"), DropDownList) For i As Integer = 1 To 12 list1.Items.Add(i.ToString()) Next End If
C# の場合:
if (!Page.IsPostBack) { DropDownList list1 = (DropDownList)this.WebDataGrid1.Behaviors.Paging.PagerTemplateContainer.FindControl("DropDownList1"); for (int i = 1; i $$<=$$ 12; i++) { list1.Items.Add(i.ToString()); } }
ドロップダウン リストの IndexChanged イベント ハンドラに WebDataGrid を手動でページします。
WebDataGrid への参照を取得します。
ドロップダウン リストから選択した値に基づき WebDataGrid をページします。
注: ドロップダウン リストはテンプレート内に組み込まれているので、コントロールへの参照を取得するにはハードコード化されたクライアント側の ID を使用する必要があります。ページのソースから ID を取得できます。
JavaScript の場合:
function IndexChanged() { var dropdownlist = document.getElementById("WebDataGrid1_ctl00_DropDownList1"); var grid = $find("WebDataGrid1"); var newValue = dropdownlist.selectedIndex; grid.get_behaviors().get_paging().set_pageIndex(newValue); }
Prev ボタンのクリックのイベント ハンドラで、WebDataGrid を手動でページします。
WebDataGrid への参照を取得します。
ドロップダウン リストへの参照を取得します。
インデックスを少なくしてチェックすれば選択可能なページの境界を超えません。
前ページに移ります。
JavaScript の場合:
var grid = $find("WebDataGrid1"); var dropdownlist = document.getElementById("WebDataGrid1_ctl00_DropDownList1"); if( grid.get_behaviors().get_paging().get_pageIndex() > 0 ) { grid.get_behaviors().get_paging().set_pageIndex(grid.get_behaviors().get_paging().get_pageIndex() - 1); }
ページ インデックスを増すことを除き、Next ボタン イベント ハンドラに同じことを行います。
JavaScript の場合:
var grid = $find("WebDataGrid1"); var dropdownlist = document.getElementById("WebDataGrid1_ctl00_DropDownList1"); if(grid.get_behaviors().get_paging().get_pageIndex() < grid.get_behaviors().get_paging().get_pageCount() - 1) { grid.get_behaviors().get_paging().set_pageIndex(grid.get_behaviors().get_paging().get_pageIndex() + 1); }
以前に追加した PageIndexChanged イベントを処理するためにコードを追加します。
JavaScript の場合:
function WebDataGrid1_PageIndexChanged() { var grid = $find("WebDataGrid1"); var dropdownlist = document.getElementById("WebDataGrid1_ctl00_DropDownList1"); dropdownlist.options[grid.get_behaviors().get_paging().get_pageIndex()].selected = true; }
アプリケーションを実行します。WebDataGrid のページャーには 2 つのボタンとひとつのドロップダウン リストで構成され、それぞれはページングで使用できます。