ALPHABETIC PAGING USING ALPHABETICAL PAGER IN ASP.NET GRIDVIEW
<div class="AlphabetPager">
<asp:Repeater ID="rptAlphabets" runat="server">
<ItemTemplate>
<asp:LinkButton runat="server" Text='<%#Eval("Value")%>' Visible='<%#!Convert.ToBoolean(Eval("Selected"))%>'
OnClick="Alphabet_Click" />
<asp:Label runat="server" Text='<%#Eval("Value")%>' Visible='<%#Convert.ToBoolean(Eval("Selected"))%>' />
</ItemTemplate>
</asp:Repeater>
</div>
<br />
<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
RowStyle-BackColor="#A1DCF2" AlternatingRowStyle-BackColor="White" AlternatingRowStyle-ForeColor="#000"
runat="server" AutoGenerateColumns="false" PageSize="5" AllowPaging="true"OnPageIndexChanging="OnPageIndexChanging">
<Columns>
<asp:BoundField DataField="ContactName" HeaderText="Contact Name" HeaderStyle-Width="150px" />
<asp:BoundField DataField="CompanyName" HeaderText="Company Name" HeaderStyle-Width="150px" />
<asp:BoundField DataField="City" HeaderText="City" HeaderStyle-Width="100px" />
<asp:BoundField DataField="Country" HeaderText="Country" HeaderStyle-Width="100px" />
<asp:BoundField DataField="PostalCode" HeaderText="Postal Code" HeaderStyle-Width="100px" />
</Columns>
<EmptyDataTemplate>
<table cellspacing="0" rules="all" border="0" style="border-collapse: collapse;">
<tr style="color: White; background-color: #3AC0F2;">
<th scope="col" style="width: 150px;">
Contact Name
</th>
<th scope="col" style="width: 150px;">
Company Name
</th>
<th scope="col" style="width: 100px;">
City
</th>
<th scope="col" style="width: 100px;">
Country
</th>
<th scope="col" style="width: 100px;">
Postal Code
</th>
</tr>
<tr>
<td colspan="99" align = "center">
No records found for the search criteria.
</td>
</tr>
</table>
</EmptyDataTemplate>
</asp:GridView>
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Collections.Generic;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
ViewState["CurrentAlphabet"] = "ALL";
this.GenerateAlphabets();
this.BindGrid();
}
}
private void BindGrid()
{
string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(strConnString))
{
using (SqlCommand cmd = new SqlCommand("SELECT * FROM Customers WHERE ContactName LIKE @Alphabet + '%' OR @Alphabet = 'ALL'"))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
cmd.Parameters.AddWithValue("@Alphabet", ViewState["CurrentAlphabet"]);
sda.SelectCommand = cmd;
using (DataTable dt = new DataTable())
{
sda.Fill(dt);
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
}
}
}
private void GenerateAlphabets()
{
List<ListItem> alphabets = new List<ListItem>();
ListItem alphabet = new ListItem();
alphabet.Value = "ALL";
alphabet.Selected = alphabet.Value.Equals(ViewState["CurrentAlphabet"]);
alphabets.Add(alphabet);
for (int i = 65; i <= 90; i++)
{
alphabet = new ListItem();
alphabet.Value = Char.ConvertFromUtf32(i);
alphabet.Selected = alphabet.Value.Equals(ViewState["CurrentAlphabet"]);
alphabets.Add(alphabet);
}
rptAlphabets.DataSource = alphabets;
rptAlphabets.DataBind();
}
protected void OnPageIndexChanging(object sender, GridViewPageEventArgs e)
{
GridView1.PageIndex = e.NewPageIndex;
this.BindGrid();
}
protected void Alphabet_Click(object sender, EventArgs e)
{
LinkButton lnkAlphabet = (LinkButton)sender;
ViewState["CurrentAlphabet"] = lnkAlphabet.Text;
this.GenerateAlphabets();
GridView1.PageIndex = 0;
this.BindGrid();
}
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
.AlphabetPager a, .AlphabetPager span
{
font-size: 8pt;
display: inline-block;
height: 15px;
line-height: 15px;
min-width: 15px;
text-align: center;
text-decoration: none;
font-weight: bold;
padding: 0 1px 0 1px;
}
.AlphabetPager a
{
background-color: #f5f5f5;
color: #969696;
border: 1px solid #969696;
}
.AlphabetPager span
{
background-color: #A1DCF2;
color: #000;
border: 1px solid #3AC0F2;
}
</style>
No comments:
Post a Comment