you're reading...
ASP.NET, Database, IT-Center, SQL Server

ASP.NET Datagrid with pagination

Create aspx file and write name with “customer.aspx”

<asp:datagrid id="dgCustomer" runat="server" BackColor="White" Width="100%" AutoGenerateColumns="False"
BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px" CellPadding="3" GridLines="Vertical" ForeColor="Black"
AllowPaging="True" PageSize="20" PagerStyle-Position="TopAndBottom" PagerStyle-Mode="NumericPages"
<SelectedItemStyle Font-Bold="True" ForeColor="White" BackColor="#000099"></SelectedItemStyle>
<AlternatingItemStyle BackColor="#CCCCCC"></AlternatingItemStyle>
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" ForeColor="White" BackColor="Black"></HeaderStyle>
<FooterStyle BackColor="#CCCCCC"></FooterStyle>

<asp:BoundColumn Visible="False" DataField="CIF"></asp:BoundColumn>

<ItemStyle HorizontalAlign="Center" Width="30px"></ItemStyle>
<input type="checkbox" id="chkDelCustomer" runat="server" NAME="chkDelCustomer">
<asp:BoundColumn DataField="CIF" HeaderText="CIF">
<ItemStyle Width="15%" CssClass="record_item"></ItemStyle>
<HeaderStyle ForeColor="White" />
<asp:BoundColumn DataField="CUST_NAME" HeaderText="Customer Name">
<ItemStyle CssClass="record_item"></ItemStyle>
<HeaderStyle ForeColor="White" />
<asp:BoundColumn DataField="NPWP" HeaderText="NPWP">
<ItemStyle CssClass="record_item"></ItemStyle>
<HeaderStyle ForeColor="White" />

<asp:BoundColumn DataField="BRANCH_NAME" HeaderText="Branch">
<ItemStyle CssClass="record_item"></ItemStyle>
<HeaderStyle ForeColor="White" />
<asp:BoundColumn DataField="SALES_CODE" HeaderText="Sales Code">
<ItemStyle CssClass="record_item"></ItemStyle>
<HeaderStyle ForeColor="White" />
<asp:BoundColumn DataField="SALES_NAME" HeaderText="Sales Name">
<ItemStyle CssClass="record_item"></ItemStyle>
<HeaderStyle ForeColor="White" />
<asp:BoundColumn DataField="BU" HeaderText="BU">
<ItemStyle CssClass="record_item"></ItemStyle>
<HeaderStyle ForeColor="White" />

<asp:HyperLinkColumn Text="Edit" DataNavigateUrlField="CIF" DataNavigateUrlFormatString="javascript:fCusDetail('{0}');">
<ItemStyle HorizontalAlign="Center" Width="5%" CssClass="record_item"></ItemStyle>
<asp:HyperLinkColumn Text="NPWP" DataNavigateUrlField="CIF" DataNavigateUrlFormatString="javascript:fCusDetailNPWP('{0}');">
<ItemStyle HorizontalAlign="Center" Width="5%" CssClass="record_item"></ItemStyle>
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />

note datagrid tag AllowPaging=”True” PageSize=”20″ PagerStyle-Position=”TopAndBottom” PagerStyle-Mode=”NumericPages”. If you want change pagination style using that tag and change the value according your taste.
Tag CssClass=”pager” have function to coloring your page number style. Below the css script, you can write that between tag head using <style> tag or include in your css.

/*-- datagrid css */
.pager a
border: 1px solid #EDF5FF;
color: #0067A5;
text-decoration: underline;
padding: 2px 5px;
.pager span
background-color: #0067A5;
border: 1px solid #DBEAFF;
color: #FFFFFF;
padding: 2px 5px;

.pager a:hover
color: #1E90FF;

/*-- end of datagrid css -- */

Fill the page_load sub :

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
end sub

Public sub GetDataListOfCustomer()
       Dim sql As String = "select tbl_cust.*, tbl_branch.branch_name  " & _
      "from [tbl_cust] left join tbl_branch on  tbl_cust.sol_id=tbl_branch.sol_id" & _
       " ORDER BY CIF asc"

Dim myObj As New globalFunction
Dim myComm As SqlDataAdapter
myComm = myObj.sqlAdpExec(sql)
Dim ds As New DataSet
myComm.Fill(ds, "dg")
dgCustomer.DataSource = ds.Tables("dg").DefaultView

   Catch ex As Exception
          dgCustomer.CurrentPageIndex = 0
   End Try
End Sub

Protected Sub dgCustomer_PageIndexChanged(ByVal source As System.Object, ByVal e As System.Web.UI.WebControls.DataGridPageChangedEventArgs) Handles dgCustomer.PageIndexChanged
    dgCustomer.CurrentPageIndex = e.NewPageIndex
End Sub

About berbagisolusi

Berbagi merupakan sebuah bentuk simbol keikhlasan untuk membantu dan menolong, sedangkan solusi adalah cara menyelesaikan masalah. Setiap manusia pasti mengalami masalah, tetapi kita tidak perlu mengalami masalah yang sama jika orang lain pernah mengalami dan kita tahu hal tersebut.


No comments yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Enter your email address to follow this blog and receive notifications of new posts by email.

Join 10 other followers

December 2011
« Nov   Jan »


Web Statistic

Blog Stats

  • 154,352 hits
%d bloggers like this: