Source view of GRIDVIEW.ASPX
DotNet Funda: Code Viewer
gridview.aspx | gridview.aspx.cs
Close Window  
<asp:Content ID="Content1" ContentPlaceHolderID="PlaceHolderHeader" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PlaceHolderForTitleAndIntro" Runat="Server">
    <asp:Label ID="lblError" runat="server" SkinID="ErrorLabel" EnableViewState="False"></asp:Label>
    <table width="100%" cellpadding="2" cellspacing="0">
        <tr valign="top" class="ArticleTitle">
            <td style="padding-left:10px;" valign="middle">
                asp:GridView control</td>
        </tr>
        <tr>
            <td class="ArticleContents">
                GridView control is a successor to the ASP.NET 1.X DataGrid control.
            </td>
        </tr>
        <tr>
            <td colspan="2">&nbsp;</td>
        </tr>
    </table>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PlaceHolderForContents" Runat="Server">
    <div class="ArticleContents">
        GridView control is a successor to the ASP.NET 1.X DataGrid control. It provides more flexibility in displaying and working with data from your database in comparison with any other controls.
        The GridView control enables you to connect to a datasource and display data is tabular format, however you have bunch of options to customize the look and feel.
        When it is rendered on the page, generally it is implemented through &lt;table&gt; HTML tag.
        <p>
        Its properties like <span class="DemoCP">BackColor, ForeColor, BorderColor, BorderStyle, BorderWidth, Height etc. </span>
        are implemented through style properites of &lt;tahle&gt; tag. 
        </p>        
       
        Following are some important properties that are very useful.
        <table width="100%" class="TutoPropPlaceHolder" border="1" cellpadding="2" cellspacing="1">
            <tr>
                <th colspan="2" align="left">
                    Behavior Properties of the GridView Control
                </th>
            </tr>
            <tr>
                <td class="DemoCP">AllowPaging</td>
                <td>
                    true/false. Indicate whether the control should support paging.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">AllowSorting</td>
                <td>
                    true/false. Indicate whether the control should support sorting.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">SortExpression</td>
                <td>
                    Gets the current sort expression (field name) that determines the order of the row.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">SortDirection</td>
                <td>
                    Gets the sorting direction of the column sorted currently (Ascending/Descending).
                </td>
            </tr>
            <tr>
                <td class="DemoCP">DataSource</td>
                <td>
                    Gets or sets the data source object that contains the data to populate the control.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">DataSourceID</td>
                <td>
                    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).
                </td>
            </tr>
            <tr>
                <td class="DemoCP">AutoGenerateEditButton</td>
                <td>
                    true/false. Indicates whether a separate column should be added to edit the record.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">AutoGenerateDeleteButton</td>
                <td>
                    true/false. Indicates whether a separate column should be added to delete the record.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">AutoGenerateSelectButton</td>
                <td>
                    true/false. Indicate whether a separate column should be added to selecat a particular record.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">AutoGenerateColumns</td>
                <td>
                    true/false. Indicate whether columns are automatically created for each field of the data source. The default is true.
                </td>
            </tr>
            <tr>
                <th colspan="2" align="left">
                    Style Properties of the GridView Control
                </th>
            </tr>
            <tr>
                <td class="DemoCP">AlternatingRowStyle</td>
                <td>
                    Defines the style properties for every alternate row in the GridView.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">EditRowStyle</td>
                <td>
                    Defines the style properties for the row in EditView (When you click Edit button for a row, the row will appear in this style).
                </td>
            </tr>
            <tr>
                <td class="DemoCP">RowStyle</td>
                <td>
                    Defines the style properties of the rows of the GridView.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">PagerStyle</td>
                <td>
                    Defines the style properties of Pager of the GridView. (If AllowPaging=true, the page number row appears in this style)
                </td>
            </tr>
            <tr>
                <td class="DemoCP">EmptyDataRowStyle</td>
                <td>
                    Defines the style properties of the empty row, which appears if there is no records in the data source.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">HeaderStyle</td>
                <td>
                    Defines the style properties of the header of the GridView. (The column header appears in this style.)
                </td>
            </tr>
            <tr>
                <td class="DemoCP">FooterStyle</td>
                <td>
                    Defines the style properties of the footer of GridView.
                </td>
            </tr>
             <tr>
                <th colspan="2" align="left">
                    Appearance Properties of the GridView Control
                </th>
            </tr>         
            <tr>
                <td class="DemoCP">CellPadding</td>
                <td>
                    Indicates the space in pixel between the cells and the border of the GridView.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">CellSpacing</td>
                <td>
                    Indicates the space in pixel between cells.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">GridLines</td>
                <td>
                    Both/Horizontal/Vertical/None. Indicates whether GrdiLines should appear or not, if yes Horizontal, Vertical or Both.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">HorizontalAlign</td>
                <td>
                    Indicates the horizontal align of the GridView.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">EmptyDataText</td>
                <td>
                    Indicates the text to appear when there is no record in the data source.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">ShowFooter</td>
                <td>
                    Indicates whether the footer should appear or not.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">ShowHeader</td>
                <td>
                    Indicates whether the header should appear or not. (The column name of the GridView)
                </td>
            </tr>
            <tr>
                <td class="DemoCP">BackImageUrl</td>
                <td>
                    Indicates the location of the image that should display as a background of the GridView.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">Caption</td>
                <td>
                    Gets or sets the caption of the GridView.                    
                </td>
            </tr>
            <tr>
                <td class="DemoCP">CaptionAlign</td>
                <td>
                    left/center/right. Gets or sets the horizontal position of the GridView caption.
                </td>
            </tr>
            <tr>
                <th colspan="2" align="left">State Properties of GridView Control</th>
            </tr>
            <tr>
                <td class="DemoCP">Columns</td>
                <td>
                    Gets the collection of objects that represent the columns in the GridView.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">EditIndex</td>
                <td>
                    Gets or sets the 0-based index that identifies the row currently to be edited.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">FooterRow</td>
                <td>
                    Returns a GridViewRow object that represents the footer of the GridView.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">HeaderRow</td>
                <td>
                    Returns a GridViewRow object that represents the header of the GridView.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">PageCount</td>
                <td>
                    Gets the number of the pages required to display the reocrds of the data source.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">PageIndex</td>
                <td>
                    Gets or sets the 0-based page index.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">PageIndex</td>
                <td>
                    Gets or sets the number of records to display in one page of GridView.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">Rows</td>
                <td>
                    Gets a collection of GridViewRow objects that represents the currently displayed rows in the GridView.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">DataKeyNames</td>
                <td>
                    Gets an array that contains the names of the primary key field of the currently displayed rows in the GridView.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">DataKeys</td>
                <td>
                    Gets a collection of DataKey objects that represent the value of the primary key fields set in DataKeyNames property of the GridView.
                </td>
            </tr>
            <tr>
                <th colspan="2" align="left">
                    Events associated with GridView Control
                </th>
            </tr>
            <tr>
                <td class="DemoCP">PageIndexChanging, PageIndexChanged</td>
                <td>
                    Both events occur when the page link is clicked. They fire before and after GridView handles the paging operation respectively.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">RowCancelingEdit</td>
                <td>
                    Fires when Cancel button is clicked in Edit mode of GridView.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">RowCommand</td>
                <td>
                    Fires when a button is clicked on any row of GridView.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">RowCreated</td>
                <td>
                    Fires when a new row is created in GridView.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">RowDataBound</td>
                <td>
                    Fires when row is bound to the data in GridView.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">RowDeleting,RowDeleted</td>
                <td>
                    Both events fires when Delete button of a row is clicked. They fire before and after GridView handles deleting operaton of the row respectively.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">RowEditing</td>
                <td>
                    Fires when a Edit button of a row is clicked but before the GridView hanldes the Edit operation.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">RowUpdating, RowUpdated</td>
                <td>
                    Both events fire when a update button of a row is clicked. They fire before and after GridView control update operation respectively.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">Sorting, Sorted</td>
                <td>
                    Both events fire when column header link is clicked. They fire before and after the GridView handler the Sort operation respectively.
                </td>
            </tr>
        </table>
        <!-- START - Demo Section -->
        <table class="DemoPlaceHolder" border="1" cellpadding="2" cellspacing="4">
            <tr>
                <td class="DemoTitle">
                    DEMO : Button
                </td>
                <td align="right">
                    <a class="DemoShowSource" href="../../misc/codeviewer/default.aspx?pagename=~/tutorials/controls/gridview.aspx" target="_blank">Show Source Code</a>
                </td>
            </tr>
            <tr valign="Top">
                <td style="width:50%;">
                    <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" CellPadding="2" CellSpacing="1"
                      EmptyDataText="<b>Sorry, There are no records to show in GridView. Try Inserting records from <a href='formview.aspx'>FormView Control</a> tutorial.</b>"
                      >
                      <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="string" />
                            <asp:Parameter Name="City" Type="string" Size="20" />
                        </UpdateParameters>
                     </asp:SqlDataSource>
                     <b>Note:</b> 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.
                </td>
                <td>
                    <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>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <pre>                
// 1st GridView /////////////////////////
&lt;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"&gt;
      &lt;Columns&gt;
        &lt;asp:TemplateField HeaderText="Delete?"&gt;
            &lt;ItemTemplate&gt;
                &lt;asp:LinkButton ID="lnk1" runat="server" Text="Delete" OnClientClick="return confirm('Are you sure to Delete?')" CommandName="Delete"&gt;&lt;/asp:LinkButton&gt;
            &lt;/ItemTemplate&gt;
        &lt;/asp:TemplateField&gt;
      &lt;/Columns&gt;
    &lt;/asp:GridView&gt;
    &lt;asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString='&lt;%$ ConnectionStrings:ConnStr %&gt;'
     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"&gt;
        &lt;DeleteParameters&gt;
            &lt;asp:Parameter Name="AutoID" /&gt;
        &lt;/DeleteParameters&gt;
        &lt;UpdateParameters&gt;
            &lt;asp:Parameter Name="AutoID" Type="Int32" /&gt;
            &lt;asp:Parameter Name="Name" Type="string" Size="50" /&gt;
            &lt;asp:Parameter Name="Address" Type="string" Size="200" /&gt;
            &lt;asp:Parameter Name="Phone" Type="int32" /&gt;
            &lt;asp:Parameter Name="City" Type="string" Size="20" /&gt;
        &lt;/UpdateParameters&gt;
     &lt;/asp:SqlDataSource&gt;
     
     
     // 2nd GridView /////////////////////////
&lt;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"&gt;
    &lt;FooterStyle BackColor="Tan" /&gt;
    &lt;SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" /&gt;
    &lt;PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" Font-Bold="True" /&gt;
    &lt;HeaderStyle BackColor="Tan" Font-Bold="True" /&gt;
    &lt;AlternatingRowStyle BackColor="PaleGoldenrod" /&gt;
&lt;/asp:GridView&gt;     
 
 
 // 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. &lt;br&gt;+" + ee.Message.ToString();
    }
    finally
    {
        dSet.Dispose();
        dAd.Dispose();
        conn.Close();
        conn.Dispose();
    }
}
     
                    </pre>
                </td>
            </tr>
        </table>
        <!-- END - Demo Section -->
        </div>
    <br />
    
    <script language="javascript" type="text/javascript">
        function GiveAlertToUser()
        {
            alert("Hi Dear, Client side method worked.");
        }
    </script>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PlaceHolderFooter" Runat="Server">
</asp:Content>

Go Top