Create custom alphabetic pagination in gridview or datagrid or repeater

If you want to bind the grid or repeater alphabetically means there will be alphabets and onclick of alphabet the grid will bind accordingly the clicked alphabet.

For this you need create a gridview or datagrid or repeater according to your requirement and a datalist which will be used for paging.

Here I am giving an example with datagrid.You can alos replace this with gridview or repeater.

Datagrid code

<asp:datagrid id="DGrid_article" runat="server"

cellspacing="0" cellpadding="0" allowsorting="True"

allowpaging="false" autogeneratecolumns="False"

datakeyfield="ARTICLE_ID" showheader="false"

width="500" AlternatingItemStyle-ForeColor="#6600ff">

<columns>

<asp:TemplateColumn>

<ItemTemplate>

<table style="display:none">

<tr>

<td>

<label runat="server" id="lblPk">

    <%# DataBinder.Eval(Container.DataItem, "article_id")%>

</label>

</td>

</tr>

</table>

</ItemTemplate>

</asp:TemplateColumn>

<asp:buttoncolumn visible="false" commandname="Select"></asp:buttoncolumn>

<asp:boundcolumn datafield="HEADING" itemstyle-width="160"&GT&LT/asp:boundcolumn>

<asp:boundcolumn datafield="NAME" itemstyle-width="120"&GT&LT/asp:boundcolumn>

<asp:boundcolumn datafield="UPLOAD_TIME" itemstyle-width="160"></asp:boundcolumn>

<asp:TemplateColumn>

<ItemTemplate>

<input id="btn" type="button" onclick="inf(this.id);" value="SHOW" runat="server" NAME="btn"

style="COLOR: #0000ff; BACKGROUND-COLOR: bisque">

</ItemTemplate>

</asp:TemplateColumn>

</columns>

</asp:datagrid>

Datalist to create custom paging

<asp:datalist id="DLst_Alphabets" runat="server"

repeatcolumns="13" repeatdirection="Horizontal">

<itemtemplate>

  

<asp:linkbutton id="LBtn_SelectAlphabet" runat="server"

 commandname="SearchByAlphabet"

commandargument='<%# DataBinder.Eval(Container, "DataItem") %>'

oncommand="LBtn_SelectAlphabet_Command">

<%# DataBinder.Eval(Container, "DataItem") %>

</asp:linkbutton>

</itemtemplate>

</asp:datalist>

Code to create alpthabets

public void BindAlphabetList()

{

DLst_Alphabets.DataSource = GetAlphabetList();//get the alphabets

DLst_Alphabets.DataBind();//bind

}

public char[] GetAlphabetList()

{

char[] L_AlphabetList = new char[26];

for(byte AlphaCtr = 65; AlphaCtr <= 90; AlphaCtr++)

{

L_AlphabetList[AlphaCtr - 65] = System.Convert.ToChar(AlphaCtr);

}

return(L_AlphabetList);

}

Binding Grid code

private void BindarticleList(string str)

{

           

string searchpattern ="select HEADING,ARTICLE_ID,NAME,UPLOAD_TIME FROM LOGIN,USER_ARTICLE WHERE LOGIN.PK_USER_ID=USER_ARTICLE.FK_USER_ID AND ROWSTATUS=1 and HEADING LIKE '"+str+"%'";//your query

connection ob = new connection();

DGrid_article.DataSource=ob.connectiondatatable(searchpattern);

DGrid_article.DataBind();//bind the grid

if(DGrid_article.Items.Count > 0)

lblDisplayMssg.Text="Total "+DGrid_article.Items.Count+" no of articles  available ";//show total no of itenms starts with this alphabets (this is optional)

}

//Onclick of alphabets Grid Binding Code

protected void LBtn_SelectAlphabet_Command(object sender, System.Web.UI.WebControls.CommandEventArgs e)

        {

LinkButton LBtn_SelectAlphabet = (LinkButton)sender;

LBtn_SelectAlphabet.FindControl(LBtn_SelectAlphabet.ID);

LBtn_SelectAlphabet.ForeColor = System.Drawing.Color.Red;

BindarticleList(e.CommandArgument.ToString());//call bind function to bind the grid

Lbl_SearchDescription.Text = "Showing articles whose begins with "" + e.CommandArgument.ToString() + "".";//add lebel which option to show that items strat with this alpthabet

        }

//Page load action

private void Page_Load(object sender, System.EventArgs e)
{
   
if(!Page.IsPostBack)
{
this.BindAlphabetList();//bind the datalist to show alphabets
Lbl_SearchDescription.Text="Showing articles whose  begins with "" + "A" + "".";
BindarticleList("a");//bind grid starts with "a"
}
}

Note: You can use gridview and repeater instead of datagrid