Ajax controltoolkit Learning Log-pagingbulletedlistextender (19)

The pagingbulletedlistextender control is used to extend the bulletedlist server control so that it can be sorted.

The following is an example:

1) Create an ASP. NET Ajax-enabled web project in vs2005 and name it pagingbulletedlistextender1.

2) Add a bulletedlist control on the page and add some listitem to it.

3) drag and drop a pagingbulletedlistextender control on the page to provide the bulletedlist sorting function.

The Code is as follows:1 <PC3: pagingbulletedlistextender id = "pagingbulletedlistextender1" behaviorid = "inline" targetcontrolid = "bulletedlist1" clientsort = "true" indexsize = "1" maxitemperpage = "20" runat = "server"
2 </PC3: pagingbulletedlistextender>
3

Attribute description:

Behaviorid: ID of the control on the client.
Targetcontrolid: The bulletedlist control to be associated.
Clientsort: whether the control allows bulletedlist to be sorted on the client.
Indexsize: the number of characters in the bulletedlist index.
Maxitemperpage: Maximum number of items displayed on each page in bulletedlist.

4) then add some radio and checkbox to control the controls.

The Code is as follows:1 <input id = "radiooption1" name = "radiooption" type = "radio"
2 value = "1" onclick = "onchangeselectoption ()"/>
3 <label for = "radiooption1"> index size 1 </label>
4 <input id = "radiooption3" name = "radiooption" type = "radio"
5 value = "3" onclick = "onchangeselectoption ()"/>
6 <label for = "radiooption3"> 10 items per page </label> <br/>
7 <input id = "radiooption2" name = "radiooption" type = "radio"
8 value = "2" onclick = "onchangeselectoption ()"/>
9 <label for = "radiooption2"> index size 2 </label>
10 <input id = "radiooption4" name = "radiooption" type = "radio"
11 value = "4" onclick = "onchangeselectoption ()"/>
12 <label for = "radiooption4"> 20 items per page </label> <br/>
13 <input type = "checkbox" id = "clientsort"
14 onclick = "onchangeclientsort ()"/>
15 <label for = "clientsort"> sort </label>

5) Add the script code of the client to the page for operations on the client.

The Code is as follows:1 var B1;
2
3 function pageload ()
4 {
5 b1 = $ find ('pagingbulletedlistbehavior1 ');
6 if (b1.get _ indexsize () = 1) $ get ('radiooption1'). Checked = true;
7 if (b1.get _ indexsize () = 2) $ get ('radiooption2'). Checked = true;
8 If (b1.get _ maxitemperpage () = 10) $ get ('radiooption3'). Checked = true;
9 If (b1.get _ maxitemperpage () = 20) $ get ('radiooption4'). Checked = true;
10 $ get ('clientsort '). Checked = b1.get _ clientsort ();
11}
12
13 function onchangeselectoption ()
14 {
15 if ($ get ('radiooption1'). Checked)
16 {
17 b1.set _ indexsize (1 );
18 b1.set _ maxitemperpage (null );
19}
20 if ($ get ('radiooption2'). Checked)
21 {
22 b1.set _ indexsize (2 );
23 b1.set _ maxitemperpage (null );
24}
25 if ($ get ('radiooption3'). Checked)
26 {
27 b1.set _ maxitemperpage (10 );
28}
29 if ($ get ('radiooption4'). Checked)
30 {
31 b1.set _ maxitemperpage (20 );
32}
33}
34
35 function onchangeclientsort ()
36 {
37 b1.set _ clientsort ($ get ('clientsort '). Checked );
38}

6) press Ctrl + F5 to view the effect in the browser.

As follows: