PEMROGRAMAN WEB (pert - 6)

RESUME PEMROGRAMAN WEB
PERTEMUAN 6
Dosen : Kurniawan Jatmika. S. Kom

GridView

GridView kontrol adalah penerus datagrid ASP.NET 1.x kontrol. Ini memberikan lebih banyak fleksibilitas dalam menampilkan dan bekerja dengan data dari database Anda dibandingkan dengan kontrol lain. Kontrol GridView memungkinkan Anda untuk terhubung ke sumber data dan menampilkan data adalah format tabel, namun Anda memiliki banyak pilihan untuk menyesuaikan tampilan dan nuansa. Ketika diberikan pada halaman, pada umumnya dilaksanakan melalui tag HTML <table>.

Sifat-sifatnya seperti BackColor, ForeColor, bordercolor, BorderStyle, BorderWidth, Tinggi dll diimplementasikan melalui properites gaya tag <tahle>.
Berikut adalah beberapa sifat penting yang sangat berguna.

Behavior Properties of the GridView Control
AllowPaging	true/false. Indicate whether the control should support paging.
AllowSorting	true/false. Indicate whether the control should support sorting.
SortExpression	Gets the current sort expression (field name) that determines the order of the row.
SortDirection	Gets the sorting direction of the column sorted currently (Ascending/Descending).
DataSource	Gets or sets the data source object that contains the data to populate the control.
DataSourceID	Indicate the bound data source control to use (Generally used when we are using SqlDataSource or AccessDataSource to bind the data, See 1st Grid example).
AutoGenerateEditButton	true/false. Indicates whether a separate column should be added to edit the record.
AutoGenerateDeleteButton	true/false. Indicates whether a separate column should be added to delete the record.
AutoGenerateSelectButton	true/false. Indicate whether a separate column should be added to selecat a particular record.
AutoGenerateColumns	true/false. Indicate whether columns are automatically created for each field of the data source. The default is true.
Style Properties of the GridView Control
AlternatingRowStyle	Defines the style properties for every alternate row in the GridView.
EditRowStyle	Defines the style properties for the row in EditView (When you click Edit button for a row, the row will appear in this style).
RowStyle	Defines the style properties of the rows of the GridView.
PagerStyle	Defines the style properties of Pager of the GridView. (If AllowPaging=true, the page number row appears in this style)
EmptyDataRowStyle	Defines the style properties of the empty row, which appears if there is no records in the data source.
HeaderStyle	Defines the style properties of the header of the GridView. (The column header appears in this style.)
FooterStyle	Defines the style properties of the footer of GridView.
Appearance Properties of the GridView Control
CellPadding	Indicates the space in pixel between the cells and the border of the GridView.
CellSpacing	Indicates the space in pixel between cells.
GridLines	Both/Horizontal/Vertical/None. Indicates whether GrdiLines should appear or not, if yes Horizontal, Vertical or Both.
HorizontalAlign	Indicates the horizontal align of the GridView.
EmptyDataText	Indicates the text to appear when there is no record in the data source.
ShowFooter	Indicates whether the footer should appear or not.
ShowHeader	Indicates whether the header should appear or not. (The column name of the GridView)
BackImageUrl	Indicates the location of the image that should display as a background of the GridView.
Caption	Gets or sets the caption of the GridView.
CaptionAlign	left/center/right. Gets or sets the horizontal position of the GridView caption.
State Properties of GridView Control
Columns	Gets the collection of objects that represent the columns in the GridView.
EditIndex	Gets or sets the 0-based index that identifies the row currently to be edited.
FooterRow	Returns a GridViewRow object that represents the footer of the GridView.
HeaderRow	Returns a GridViewRow object that represents the header of the GridView.
PageCount	Gets the number of the pages required to display the reocrds of the data source.
PageIndex	Gets or sets the 0-based page index.
PageIndex	Gets or sets the number of records to display in one page of GridView.
Rows	Gets a collection of GridViewRow objects that represents the currently displayed rows in the GridView.
DataKeyNames	Gets an array that contains the names of the primary key field of the currently displayed rows in the GridView.
DataKeys	Gets a collection of DataKey objects that represent the value of the primary key fields set in DataKeyNames property of the GridView.
Events associated with GridView Control
PageIndexChanging, PageIndexChanged	Both events occur when the page link is clicked. They fire before and after GridView handles the paging operation respectively.
RowCancelingEdit	Fires when Cancel button is clicked in Edit mode of GridView.
RowCommand	Fires when a button is clicked on any row of GridView.
RowCreated	Fires when a new row is created in GridView.
RowDataBound	Fires when row is bound to the data in GridView.
RowDeleting,RowDeleted	Both events fires when Delete button of a row is clicked. They fire before and after GridView handles deleting operaton of the row respectively.
RowEditing	Fires when a Edit button of a row is clicked but before the GridView hanldes the Edit operation.
RowUpdating, RowUpdated	Both events fire when a update button of a row is clicked. They fire before and after GridView control update operation respectively.
Sorting, Sorted	Both events fire when column header link is clicked. They fire before and after the GridView handler the Sort operation respectively.

DEMO : Button	Show Source Code
1st Grid: Simple GridView with SqlDataSource Delete? AutoID Name Address Phone City Edit Delete 6921 Edit Delete 6922 3 2 26594444 erewre Edit Delete 6919 aa sada ada dada Edit Delete 6797 AAAAA gg jv uig; Edit Delete 6907 ABCDEF 984612389n kdkqwjdj jawjdfjfrj Edit Delete 6920 asa ada adsad asda Edit Delete 6916 dfaf fadf adfa fadsf Edit Delete 6897 dfsdf sdfsdf sdfdsf fsdfsd 1 2 3 4 5 Note: Updating this GridView will not affect 2nd GridView listing unless you come to this page without page postback as that GridView data has been bound in not IsPostBack condition. 2nd Grid: GridView with CodeBehind Data Bound AutoID Name Address Phone City 6921 6922 3 2 26594444 erewre 6919 aa sada ada dada 6797 AAAAA gg jv uig; 6907 ABCDEF 984612389n kdkqwjdj jawjdfjfrj 6920 asa ada adsad asda 6916 dfaf fadf adfa fadsf 6897 dfsdf sdfsdf sdfdsf fsdfsd 6898 dfsdf sdfsdf sdfdsf fsdfsd 6899 dfsdf sdfsdf sdfdsf fsdfsd 6900 dfsdf sdfsdf sdfdsf fsdfsd 6901 dfsdf sdfsdf sdfdsf fsdfsd 6894 dfsdf sdfsdf sdfdsf fsdfsd 6895 dfsdf sdfsdf sdfdsf fsdfsd 6896 dfsdf sdfsdf sdfdsf fsdfsd 6904 dfsdf sdfsdf sdfdsf fsdfsd 6905 dfsdf sdfsdf sdfdsf fsdfsd 6903 dfsdfh sdfsdf sdfdsf fsdfsd 6917 fdfa fasfa fadf afdaf 6893 fdg fdgf dfgdf dfgdf 6914 fg dgdfg dfg fdgfg 6915 fsdgsdf sdfgsdf 56346 dfghdfgh 6909 madhu hyd 999999 asdsasa 6918 sa sa sa sa 6860 sasa asasa 343 sdd 6887 sdsdasdsa sadsadasd sdasdassadassd sadasd 6811 sss vvv sss ssga 6854 ssssss sdsdsd sdsdsd sdsdsd 6771 sstyhtu ddd ff ee 6815 test this 3 214123 berlin 6809 tet wera 1231231233 rte 6861 thjghjvg t t t 6759 ui iuiu wc iui uii 6824 varun race course 9703493247 Coimbatore 6889 vvxc vxcvxc vxcvxc vxcvcx 6876 wewewe wewe wewewew wewew 6913 xcx xcx xcx cxc 6891 xg gxg 46456 xgxd 6912 yogi chennai 9952214665 chennai
// 1st GridView ///////////////////////// <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" Caption="1st Grid: Simple GridView with SqlDataSource" AllowPaging="True" AllowSorting="True" AutoGenerateEditButton="true" DataKeyNames="AutoID" PageSize="8"> <Columns> <asp:TemplateField HeaderText="Delete?"> <ItemTemplate> <asp:LinkButton ID="lnk1" runat="server" Text="Delete" OnClientClick="return confirm('Are you sure to Delete?')" CommandName="Delete"></asp:LinkButton> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString='<%$ ConnectionStrings:ConnStr %>' SelectCommand="Select * FROM SampleForTutorials ORDER BY [Name]" DeleteCommand="Delete FROM SampleForTutorials WHERE AutoID = @AutoID" UpdateCommand="UPDATE SampleForTutorials SET Name = @Name, Address = @Address, Phone = @Phone, City = @City WHERE AutoID = @AutoID"> <DeleteParameters> <asp:Parameter Name="AutoID" /> </DeleteParameters> <UpdateParameters> <asp:Parameter Name="AutoID" Type="Int32" /> <asp:Parameter Name="Name" Type="string" Size="50" /> <asp:Parameter Name="Address" Type="string" Size="200" /> <asp:Parameter Name="Phone" Type="int32" /> <asp:Parameter Name="City" Type="string" Size="20" /> </UpdateParameters> </asp:SqlDataSource> // 2nd GridView ///////////////////////// <asp:GridView ID="GridView2" runat="server" BackColor="LightGoldenrodYellow" BorderColor="Tan" Caption="2nd Grid: GridView with CodeBehind Data Bound" AllowPaging="False" AllowSorting="False" BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None"> <FooterStyle BackColor="Tan" /> <SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" /> <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" Font-Bold="True" /> <HeaderStyle BackColor="Tan" Font-Bold="True" /> <AlternatingRowStyle BackColor="PaleGoldenrod" /> </asp:GridView> // CODE BEHIND // Bind the GridView ///////////////////////// private void BindGridView() { string connStr = ConfigurationManager.ConnectionStrings["ConnStr"].ToString(); SqlConnection conn = new SqlConnection(connStr); conn.Open(); SqlDataAdapter dAd = null; DataSet dSet = new DataSet(); try { string strSql = "Select * FROM SampleForTutorials ORDER BY [Name]"; dAd = new SqlDataAdapter(strSql, conn); dAd.Fill(dSet, "SampleTable"); GridView2.DataSource = dSet.Tables["SampleTable"].DefaultView; GridView2.DataBind(); } catch (Exception ee) { lblError.Text = "Error occured. <br>+" + ee.Message.ToString(); } finally { dSet.Dispose(); dAd.Dispose(); conn.Close(); conn.Dispose(); } }      Sumber : http://www.dotnetfunda.com/tutorials/controls/gridview.aspx