Dynamic link in asp.net gridview

Question

I'm trying to create a gridview with an extra column that contains a hyperlink for each row. Unfortunately my hyperlinks doesn't start from the top of the column, instead they are started from the second row of the hyperlink's column.

See this picture for more information >>> https://i.sstatic.net/GghBP.png

As you can see in that picture, there is a 'view' column that contains hyperlinks, but the problem is the first row is always empty. The hyperlink that's on the second row should be on the first, and the third should be on the second, and so on.

Can anyone show me where I went wrong?

Here is my gridview declaration on my aspx page:

<asp:GridView ID="GridView1" runat="server" CellPadding="4" AllowPaging="True" 
    AllowSorting="True" AutoGenerateColumns="False" 
    OnPageIndexChanging="GridView1_PageIndexChanging" 
    OnSorting="GridView1_Sorting" PageSize="20" DataKeyNames="no_kwitansi"
    DataSourceID="home1" BackColor="White" BorderColor="#CC9966" BorderStyle="None"
    BorderWidth="1px" RowStyle-Wrap="False" OnRowDataBound="GridView1_RowDataBound">
    <AlternatingRowStyle BackColor="#CCCCCC" />
    <FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
    <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />
    <PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />
    <RowStyle BackColor="White" ForeColor="#330099" />
    <RowStyle HorizontalAlign="Center" />
    <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />
    <SortedAscendingCellStyle BackColor="#FEFCEB" />
    <SortedAscendingHeaderStyle BackColor="#AF0101" />
    <SortedDescendingCellStyle BackColor="#F6F0C0" />
    <SortedDescendingHeaderStyle BackColor="#7E0000" />
    <Columns>
        <asp:BoundField HeaderText="#" />
        <asp:BoundField DataField="no_kwitansi" HeaderText="No.Kwitansi" SortExpression="no_kwitansi" ReadOnly="True" />
        <asp:BoundField DataField="nama_vendor" HeaderText="Vendor" SortExpression="nama_vendor" />
        <asp:BoundField DataField="nama_pekerja" HeaderText="Pekerja" SortExpression="nama_pekerja" />
        <asp:BoundField DataField="nama_penanggungjawab" HeaderText="Penanggungjawab" SortExpression="nama_penanggungjawab" />
        <asp:BoundField DataField="satuan" HeaderText="Satuan" SortExpression="satuan" />
        <asp:BoundField DataField="jumlah" HeaderText="Nominal" SortExpression="jumlah" />
        <asp:BoundField DataField="tanggal" HeaderText="Tanggal" SortExpression="tanggal" />
    </Columns>
</asp:GridView>

Here is my C# code behind:

This is my page_load function, I created the template field here.

protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            ViewState["SortExpr"] = Sort_Direction;

            TemplateField tfield = new TemplateField();
            tfield.HeaderText = "View";
            GridView1.Columns.Add(tfield);

            home1.DataBind();
        }
    }

Here is my gridview rowDataBound function, where I create the hyperlink.

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            HyperLink hlContro = new HyperLink();
            for (int i = 0; i < GridView1.Rows.Count; i++)
            {
                hlContro.NavigateUrl = "./Home.aspx?ID=" + GridView1.Rows[i].Cells[1].Text;
                //hlContro.ImageUrl = "./sample.jpg";
                hlContro.Text = "Documents";
                //GridView1.Rows[i].Cells[0].Controls.Add(hlContro);
            }
            e.Row.Cells[8].Controls.Add(hlContro);
        }
    }

Answer 1

so why not just a template field, and remove all the server side boilerplate? What happen if you would change position of your column?

Below is the solution where you need not to write anything in your server side code. Simple and easy.

<asp:TemplateField HeaderText="Active">
   <ItemTemplate>
     <asp:HyperLink ID="HyperLink1" runat="server" Text='<%# Eval("no_kwitansi") %>' 
        NavigateUrl= '<%# "./Home.aspx?ID=" + Eval("no_kwitansi") %>'>
     </asp:HyperLink>

   </ItemTemplate>

</asp:TemplateField>

Answer 2

why are you adding it from code behind even you can add in html page

 <asp:TemplateField HeaderText="View">
                <ItemTemplate> 
   <asp:LinkButton ID="test1" runat="server" ForeColor="#525252" Text="Documents" />
                </ItemTemplate>
            </asp:TemplateField>

a similar example is shown on this link you can try Link

Answer 3

The RowDataBound event is raised when a data row (represented by a GridViewRow object) is bound to data in the GridView control. This enables you to provide an event-handling method that performs a custom routine, such as modifying the values of the data bound to the row, whenever this event occurs.

Just write code like this

 protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                HyperLink hlContro = new HyperLink();

                    hlContro.NavigateUrl = "./Home.aspx?ID=" + e.Row.Cells[1].Text;
                    //hlContro.ImageUrl = "./sample.jpg";
                    hlContro.Text = "Documents";
                    //GridView1.Rows[i].Cells[0].Controls.Add(hlContro);

                e.Row.Cells[8].Controls.Add(hlContro);
            }
        }