Home / AJAX

HOW TO Use the PagingBulletedList Control

RSS
Modified on 2009/12/24 02:28 by Chris Muench Categorized as Uncategorized

PagingBulletedList Demonstration

  • Alfa
  • Alpha
  • Bissotwo
  • Bravo
  • Charlie
  • Delta
  • Echo
  • Eight
  • Five
  • Four
  • Foxtrot
  • Golf

PagingBulletedList Description

PagingBulletedList is an ASP.NET AJAX extender that can be attached to an ASP.NET BulletedList control and provide client-side sorted paging. It is very flexible and lets you specify either the number of characters used in the heading indices or the maximum number of items to display per index. If the input is not sorted (either on the server or client), it will generated more header indices but still function appropriately.

Video - How Do I: Use the ASP.NET AJAX PagingBulletedList Control?

PagingBulletedList Client Code Sample

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> <style type="text/css"> .selected { background-color: Yellow } .unselected { background-color: Gray } </style> <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/beta/0911/extended/ExtendedControls.debug.js" type="text/javascript"></script> <script type="text/javascript"> Sys.require(Sys.components.pagedList, function() { $("#list").pagedList({ SelectIndexCssClass: "selected", UnselectIndexCssClass: "unselected", Separator: " | " }); }); </script> </head> <body> <ul id="list"> <li>Alfa</li> <li>Alpha</li> <li>Bissotwo</li> <li>Bravo</li> <li>Charlie</li> <li>Delta</li> <li>Echo</li> <li>Eight</li> <li>Five</li> <li>Four</li> <li>Foxtrot</li> <li>Golf</li> </ul> </body> </html>


PagingBulletedList Client Properties

PagingBulletedList Server Code Sample

    <script language="javascript" type="text/javascript">
        var bl;
        
        function pageLoad() {
            bl = $find('PagingBulletedListBehavior1');
            if(bl.get_IndexSize() == 1) $get('radioOption1').checked = true;
            if(bl.get_IndexSize() == 2) $get('radioOption2').checked = true;
            if(bl.get_MaxItemPerPage() == 10) $get('radioOption3').checked = true;
            if(bl.get_MaxItemPerPage() == 20) $get('radioOption4').checked = true;
            $get('clientSort').checked = bl.get_ClientSort();
        }
            
        function onChangeSelectOption() {
            
            if ($get('radioOption1').checked) {
                bl.set_MaxItemPerPage(null);
                bl.set_IndexSize(1);
            }
            if ($get('radioOption2').checked) {
                bl.set_MaxItemPerPage(null);
                bl.set_IndexSize(2);
            }
            if ($get('radioOption3').checked) {
                bl.set_MaxItemPerPage(10);
            }
            if ($get('radioOption4').checked) {
                bl.set_MaxItemPerPage(20);
            }
        }

function onChangeClientSort() { bl.set_ClientSort($get('clientSort').checked); } </script> <div style="height: 420px; overflow: auto; overflow-y: scroll; border: solid 1px #CCCCCC;"> <asp:BulletedList ID="BulletedList1" runat="server" DisplayMode="Text"> <asp:ListItem>writeln</asp:ListItem> <asp:ListItem>1566</asp:ListItem> <asp:ListItem>4556</asp:ListItem> <asp:ListItem>9556776</asp:ListItem> <asp:ListItem>12234</asp:ListItem> <asp:ListItem>1566</asp:ListItem> <asp:ListItem>abort</asp:ListItem> <asp:ListItem>add</asp:ListItem> <asp:ListItem>addBehavior</asp:ListItem> <asp:ListItem>AddChannel</asp:ListItem> <asp:ListItem>AddDesktopComponent</asp:ListItem> <asp:ListItem>back</asp:ListItem> <asp:ListItem>blur</asp:ListItem> <asp:ListItem>BrandImageUri</asp:ListItem> <asp:ListItem>ChooseColorDlg</asp:ListItem> <asp:ListItem>clear</asp:ListItem> <asp:ListItem>createAttribute</asp:ListItem> <asp:ListItem>createCaption</asp:ListItem> <asp:ListItem>createStyleSheet</asp:ListItem> <asp:ListItem>createTextNode</asp:ListItem> <asp:ListItem>doScroll</asp:ListItem> <asp:ListItem>dragDrop</asp:ListItem> <asp:ListItem>duplicate</asp:ListItem> <asp:ListItem>elementFromPoint</asp:ListItem> <asp:ListItem>empty</asp:ListItem> <asp:ListItem>execCommand</asp:ListItem> <asp:ListItem>execScript</asp:ListItem> <asp:ListItem>expand</asp:ListItem> <asp:ListItem>findText</asp:ListItem> <asp:ListItem>fireEvent</asp:ListItem> <asp:ListItem>forward</asp:ListItem> <asp:ListItem>getAdjacentText</asp:ListItem> <asp:ListItem>getAllResponseHeaders</asp:ListItem> <asp:ListItem>getAttribute</asp:ListItem> <asp:ListItem>getAttribute</asp:ListItem> <asp:ListItem>getAttributeNode</asp:ListItem> <asp:ListItem>hasChildNodes</asp:ListItem> <asp:ListItem>hasFeature</asp:ListItem> <asp:ListItem>hasFocus</asp:ListItem> <asp:ListItem>hide</asp:ListItem> <asp:ListItem>inRange</asp:ListItem> <asp:ListItem>insertAdjacentElement</asp:ListItem> <asp:ListItem>mergeAttributes</asp:ListItem> <asp:ListItem>move</asp:ListItem> <asp:ListItem>moveBy</asp:ListItem> <asp:ListItem>namedItem</asp:ListItem> <asp:ListItem>namedRecordset</asp:ListItem> <asp:ListItem>navigate</asp:ListItem> <asp:ListItem>nextPage</asp:ListItem> <asp:ListItem>normalize</asp:ListItem> <asp:ListItem>open</asp:ListItem> <asp:ListItem>parentElement</asp:ListItem> <asp:ListItem>pasteHTML</asp:ListItem> <asp:ListItem>previousPage</asp:ListItem> <asp:ListItem>print</asp:ListItem> <asp:ListItem>prompt</asp:ListItem> <asp:ListItem>queryCommandEnabled</asp:ListItem> <asp:ListItem>queryCommandIndeterm</asp:ListItem> <asp:ListItem>recalc</asp:ListItem> <asp:ListItem>refresh</asp:ListItem> <asp:ListItem>releaseCapture</asp:ListItem> <asp:ListItem>reload</asp:ListItem> <asp:ListItem>remove</asp:ListItem> <asp:ListItem>removeAttribute</asp:ListItem> <asp:ListItem>tags</asp:ListItem> <asp:ListItem>taintEnabled</asp:ListItem> <asp:ListItem>urns</asp:ListItem> <asp:ListItem>write</asp:ListItem> <asp:ListItem>writeln</asp:ListItem> </asp:BulletedList> <ajaxToolkit:PagingBulletedListExtender ID="PagingBulletedListExtender1" runat="server" BehaviorID="PagingBulletedListBehavior1" TargetControlID="BulletedList1" ClientSort="true" IndexSize="1" Separator=" - " SelectIndexCssClass="selectIndex" UnselectIndexCssClass="unselectIndex" /> </div> <input id="radioOption1" name="radioOption" type="radio" value="1" onclick="onChangeSelectOption()" /> <label for="radioOption1">Index size 1</label> <input id="radioOption3" name="radioOption" type="radio" value="3" onclick="onChangeSelectOption()" /> <label for="radioOption3">10 Items per page</label><br /> <input id="radioOption2" name="radioOption" type="radio" value="2" onclick="onChangeSelectOption()" /> <label for="radioOption2">Index size 2</label> <input id="radioOption4" name="radioOption" type="radio" value="4" onclick="onChangeSelectOption()" /> <label for="radioOption4">20 Items per page</label> <br /> <input type="checkbox" id="clientSort" onclick="onChangeClientSort()" /> <label for="clientSort">Sort</label> </div>

PagingBulletedList Server Properties

The properties in italics are optional.

<ajaxToolkit:PagingBulletedListExtender ID="PBLE1" runat="server"
    TargetControlID="BulletedList1" 
    ClientSort="true"
    IndexSize="1"
    MaxItemPerPage="20"
    Separator=" - "
    SelectIndexCssClass="selectIndex"
    UnselectIndexCssClass="unSelectIndex" />
  • TargetControlID - The ID of the BulletedList to page
  • ClientSort - Whether or not the items should be sorted client-side
  • IndexSize - Number of characters in the index headings (ignored if MaxItemPerPage is set)
  • MaxItemPerPage - Maximum number of items per page (ignores the IndexSize property)
  • Separator - Separator text to be placed between indices
  • SelectIndexCssClass - CSS class for the selected index.
  • UnselectIndexCssClass - CSS class for indices that aren't selected

PagingBulletedList Additional Code Samples