How to use PagingBulletedListExtender in asp.net ajax

PagingBulletedListExtender in asp.net ajax
PagingBulletedListExtender is an asp.net ajax control toolkit's extender control. PagingBulletedListExtender control can be attached to an asp.net BulletedList web server control and provide client side sorted paging.

PagingBulletedListExtender control have the following properties those are TargetControlID, ClientSort, IndexSize, MaxItemPerPage, Separator, SelectIndexCssClass and UnselectIndexCssClass.

PagingBulletedListExtender control's TargetControlID property specify the BulletedList server control which we want to extend as a sorted paging bulleted list. ClientSort property specify whether extended BulletedList control's items should be sorted client side.

IndexSize property set the number of characters in the index headings should be appear in extended bulltedlist control. This property is ignored if MaxItemPerPage property have a value. MaxItemPerPage property allow us to set maximum number of items per page will display in extended BulletedList control. Separator property set the separator text between indices.

ASP.NET developers can change the default look and feel of extended BulltedList control using CSS classes. SelectIndexCssClass represent a CSS class that we can apply for selected index design. UnselectIndexCssClass property apply a CSS class for indices that are not selected.
UsingPagingBulletedListExtender.aspx

<%@ Page Language="C#" AutoEventWireup="true" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html>

<script runat="server">
    
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Ajax PagingBulletedListExtender - How to use PagingBulletedListExtender in asp.net ajax</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2 style="color:DarkBlue; font-style:italic;">Ajax Control ToolKit Example: PagingBulletedListExtender</h2>
        <hr width="575" align="left" color="CornFlowerBlue" />
        <br /><br />
        <asp:ScriptManager 
            ID="ScriptManager1"
            runat="server"
            >
        </asp:ScriptManager>
        <cc1:PagingBulletedListExtender 
            ID="PagingBulletedListExtender1" 
            runat="server"
            TargetControlID="BulletedList1"
            >
        </cc1:PagingBulletedListExtender>
        <asp:SqlDataSource 
            ID="SqlDataSource1"
            runat="server"
            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="Select ProductID, ProductName From Products"
            >
        </asp:SqlDataSource>
        <asp:BulletedList 
            ID="BulletedList1" 
            runat="server"
            DataSourceID="SqlDataSource1"
            DataTextField="ProductName"
            DataValueField="ProductID"
            ForeColor="DodgerBlue"
            >
        </asp:BulletedList>        
    </div>
    </form>
</body>
</html>
More asp.net ajax examples