9.29.2008

Paging using a CheckBoxList, a PagedDataSource and the Ajax.NET

Recently, I had the need for doing paging using a check list box. Besides, I need to use Ajax.Net for making the paging work faster. So I decided to blog on how to do this task.

First web have to add the Ajax Script Manager and the Ajax Update panel to the page, so we can drag our list control inside it and page using the ajax functionality.

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
        
        </ContentTemplate>
        </asp:UpdatePanel>

    </div>

Then we add the list and the next and previous controls for moving using the paging functionality.

<ContentTemplate>

        <asp:CheckBoxList ID="CheckBoxList1" runat="server">
        </asp:CheckBoxList>
        <div>
            <asp:LinkButton ID="lnkPrev" runat="server"  onclick="lnkPrev_Click"><<</asp:LinkButton> ||
            <asp:LinkButton ID="lnkNext" runat="server" onclick="lnkNext_Click">>></asp:LinkButton>

        </div>

</ContentTemplate>

Then we need to add the code functionality to make the complete code work. First, we have to create a function that does the Binding for the list. Here is where the PagedDataSource object is used. Instead of doing the bind directly from the collection to the list, we have to bind it to the PagedDataSource object, this allows all the paging functionality for the List. Besides, we need to set the page index, this will be doing by the use of a session variable.Then we just bind the list to the PagedDataSource object like follows.

private void DoPaging( )
{
    List<int> sampleData = new List<int>();
    for (int i = 0; i < 150000; i++)
    {
        sampleData.Add(i);
    }

    PagedDataSource pagingSource = new PagedDataSource( );
    pagingSource.DataSource = sampleData;
    pagingSource.AllowPaging = true;
    pagingSource.PageSize = 10;
    pagingSource.CurrentPageIndex = (int) Session ["PageNumber"];

    CheckBoxList1.DataSource = pagingSource;
    CheckBoxList1.DataBind( );

}

We have to initialize the page doing the call for the method explained before and we also set the Page number session variable to the first page since we are initializing the form.

protected void Page_Load(object sender, EventArgs e)
{
    if ( !Page.IsPostBack)
    {
        Session["PageNumber"] = 0;
        DoPaging();
    }
}

Then we have to create the next and the previous events handlers for the link buttons we placed for navigation.

protected void lnkNext_Click( object sender, EventArgs e )
{
    int currentIndex = (int) Session["PageNumber"];
    Session["PageNumber"] = currentIndex + 1;
    DoPaging();
}
protected void lnkPrev_Click( object sender, EventArgs e )
{
    int currentIndex = (int)Session["PageNumber"];
    Session["PageNumber"] = currentIndex - 1;
    DoPaging();
}

And that’s all. We run the demo and we have a CheckListBox with paging and with ajax.

It is important to point that we are initializing the paging using a simple int generic that fills with 150000 items. If we are going to the database, we have to use some other method for not keep going to the database each time we click next or previous, for example, storing your entity object inside a session variable or Serializing your object in the server side.