With the WebHierarchicalDataGrid™ control’s paging template feature, you can customize the look and feel of the pager to your specifications. You can add any control to the template; however, using the pager template requires that you handle the paging mechanism manually.
You will set up paging for the parent band of WebHierarchicalDataGrid using two buttons and a dropdown list. The two buttons handle moving to the previous and next pages while the dropdown list moves to the selected page.
Bind WebHierarchicalDataGrid to a WebHierarchicalDataSource™ component so that it retrieves data from the Categories and products table. For more information on this see the Binding to Hierarchical Data Source topic.
In the Microsoft® Visual Studio™ property window, locate the Bands property and click the ellipsis (…) button to launch the Edit WebHierarchicalDataGrid Bands Dialog.
For the parent band locate the Behaviors property and click the ellipsis (…) button to launch the Behaviors Editor Dialog.
Check the CheckBox next to Paging from the list on the left to add and enable the behavior. For this topic the PageSize is set to 3. The EnableInheritance property can be enabled to set Paging for the child bands.
In the properties, expand PagingClientEvents and handle the PageIndexChanged event by entering an event handler name: WebHierarchicalDataGrid1_PageIndexChanged.
Click Apply then Ok to close the editor.
Right-click on WebHierarchicalDataGrid and highlight Edit Template. You will see an option for Pager Template.
Select Pager Template from the context menu. The WebHierarchicalDataGrid view changes to the template editing view.
Add two HTML buttons and an ASP.NET DropDownList control to the template.
Position the dropdown list between the two buttons.
Set the value of the button before the dropdown list to Prev and set its id to PrevButton.
Set the value of the second button to Next and set its id to NextButton.
Double-click each button to add event handlers for them.
Add a client-side handler named IndexChanged for the dropdown list. This will handle the manual paging of WebHierarchicalDataGrid when values are selected from the dropdown. The HTML for the dropdown list should look like the following:
In HTML:
<asp:DropDownList ID="DropDownList1" runat="server" onchange="return IndexChanged()"> </asp:DropDownList>
Right-click WebHierarchicalDataGrid again and select End Template Editing. You are returned to the normal grid display. .
Populate the DropDownList control with the page numbers for your data in the WebHierarchicalDataGrid control’s_RowIslandDataBinding event.
Obtain a reference to the dropdown list in your pager template. This requires accessing the PagerTemplateContainer—the container of controls inside the template—and finding the control inside.
Populate the dropdown list with the number of pages. Handle the RowIslandDataBinding event and write the following code.
In 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 simplicity, we are hard coding several list items. In a production application,
'you would use logic to calculate how many page numbers should be added to the list.
For i As Integer = 1 To 3
list1.Items.Add(i.ToString())
Next
End If
End If
End Sub
In 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 simplicity, we are hard coding
//several list items. In a production application,
//you would use logic to calculate how many
//page numbers should be added to the list.
for (int i = 1; i $$<=$$ 3; i++)
{
list1.Items.Add(i.ToString());
}
}
}
}
Manually page WebHierarchicalDataGrid in the dropdown list’s IndexChanged event handler.
Get a reference to WebHierarchicalDataGrid.
Page WebHierarchicalDataGrid based on the value selected from the dropdown list.
In 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);
}
Page WebHierarchicalDataGrid using the Prev button control’s client-side Click event handler.
Get a reference to WebHierarchicalDataGrid.
Get a reference to the dropdown list.
Check that by decreasing the index, you do not exceed the bounds of the selectable pages.
Go to the next page.
In 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);
}
Do the same thing for the Next button event handler except that you are increasing the page index.
In 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);
}
Add code to the body of the WebHierarchicalDataGrid1_PageIndexChanged client-side event you added earlier in step number 5.
In 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;
Run the application. The parent band of WebHierarchicalDataGrid’s pager consists of two buttons and a dropdown list, each of which can be used for paging.
