Adding Auto Change to a DropDownList

Adding an onchange to a drop down list enables other fields on the page to be updated dependant upon the selection.

I have used the auto post back on a drop down list to:

• create a cascading drop down list. The selection of the parent item governs the entries in the child list
• a page size selection changing the number of rows shown in a GridView

Taking the GridView page size as an example.

For a table of items, with paging, either a fixed page size can be used. Or the option may be given to select the page size for the table of results. This allows the number of results in the table to be selected according to the display.

Giving the option to change the page size requires that the results be re-sourced from the database and the paging reset to the first page.

A refresh button could be provided, perhaps positioned alongside the paging, which is an update of the table results displayed. Or as implemented in this example, changing the selection of the dropdownlist of page sizes causes a refresh of the page implementing the updated number of table rows shown and resetting the page counter to the first page.

This example is taken from work for a DotNetNuke website.

A page size selection was added to a table of entries. Changing the page size caused a refresh of the page with a change to the number of rows displayed in the table.

To implement this auto post back there are three additions to be added:

1. a WithEvents to the DropDownList object
2. an autopostback to the dropdownlist itself
3. a handler for the autopostback

Addition of WithEvents

In the declaration add WithEvents, giving:

Protected WithEvents ddlPageSize As System.Web.UI.WebControls.DropDownList

The addition of the WithEvents adds the necessary JavaScript to the page to facilitate the handling of the drop down list onchange event.

Auto Postback

For the DropDownList add the parameter AutoPostBack=”True”

Adding the autopostback parameter to the drop down list adds the code to cause the postback when a change is made to the selection.

In the example below the DNN label is shown followed by the declaration for the drop down list. The list shows a number of different page sizes. Nor that the autopostback has been added with a value of true, enabling it.

<dnn:label id="plPageSize" suffix="" runat="server" controlname="ddlPageSize" ></dnn:Label>
<asp:DropDownList id="ddlPageSize" Runat="server" AutoPostBack="true" >
  <asp:ListItem Value="5" Text="5"></asp:ListItem>
  <asp:ListItem Value="10" Text="10"></asp:ListItem>
  <asp:ListItem Value="15" Text="15"></asp:ListItem>
  <asp:ListItem Value="20" Text="20"></asp:ListItem>
  <asp:ListItem Value="30" Text="30"></asp:ListItem>
  <asp:ListItem Value="50" Text="50"></asp:ListItem>
</asp:DropDownList>

Event Handler

An event handler is added to support the change of selection.

In this case the change of selection will get the entries from the database, using the new page size.

Protected Sub ddlPageSizeChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles ddlPageSize.SelectedIndexChanged
  Try
    PageSize =ddlPageSize.SelectedValue
    PageIndex = 0
    BindData(Filter, ddlSearchType.SelectedValue, SortExpression, SortDirection)

  Catch exc As Exception 'Module failed to load
    ProcessModuleLoadException(Me, exc)
  End Try
End Sub

The BindData function handles the querying of the database, the assignment of the results to the GridView and the display and parameters of the paging control.