How to use PagingBulletedListExtender Control on ASP.NET Web Page Easily

On By
The PagingaBulletedListExtender Control is used to display the different contents in the form of the bulleted list on the indices clicked.It provides client-side sorted paging.In this you can specify the number of characters that you want to use for creating heading indices or maximum number of items to display per index.This control uses page able  grid control to page through the items of the BulletedList control.This extender control is useful when the web page contains a long list of items.this control is helpful to organize all the bound items in pages and displays links of each of them. This control is every helpful in paging so we have to know about it in detail. before use this control You have to install Ajaxtoolkit on your visual studio first.
There are some important properties of this control as given below:-

  • TargetControlID:- It is helpful to set the ID of the BulletedList control to which the extender control is attached.
  • ClientSort:- It is used whether or not the items should be sorted at the client side.
  • Index size:-It sets the number of characters in the index heading.This is used when the MaxItemPerPage property is set.
  • MaxItemPerPage:-It is helpful to display the maximum number of items displayed per page.
  • Separator:-It is used to set the separator text.
There are some steps to implement this whole concepts as given below:-
Step 1:- First open your Microsoft Sql Server Management  studio--> Create a table (Cricket) with  columns (s.no.,team,etc) and insert some values as shown below:-

 Step 2:-First open your visual studio-->File-->New-->Website--> Select ASP.NET Empty website-->OK -->Now open Solution Explorer --> Add New Item..--> Select Web Form(Default.aspx)-->press Add button-->Done.
Step 3:-Now open Toolbox-->Drag and Drop Ajax ToolkitScriptManager and SqlDataSource on the page--> Configure Data Source as shown below:-

Step 4:-Now Open Source File-->Drag and Drop Bulleted List and PagingBulletedListExtender control --> and set their properties also as given below:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </ajax:ToolkitScriptManager>
        <strong><span class="style2">Click Corresponding Latter to view the Data<br />
        <br />
        </span>
     </strong><div>
  <asp:BulletedList ID="BulletedList1" runat="server" 
            DataSourceID="SqlDataSource1" DataTextField="team" 
            DataValueField="team">
  </asp:BulletedList>
  
  <ajax:PagingBulletedListExtender ID="PagingBulletedListExtender1" runat="server" 
     TargetControlID="BulletedList1" ClientSort="true" IndexSize="1" Separator="-">
  </ajax:PagingBulletedListExtender>
    </div>
    </div>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
        ConnectionString="<%$ ConnectionStrings:masterConnectionString %>" 
        SelectCommand="SELECT [team] FROM [cricket]">
    </asp:SqlDataSource>
    </form>
</body>
</html>
Step 5:- Now Run the application( press F5)-->You will see following output as shown below:-

 Learn More... 

Download Whole attached file
              Download
Subscribe through email and get Free updates in inbox
Please like and share this post with your friends...

You May Also Like...

0 comments:

Post a Comment

Powered by Blogger.