ASP.NET (VB): GridView with ImageButton > Populate text box with comments

Question

It has been so long since I have coded a page in VB. For the life of me I just cannot remember how to do this.

I have a GridView on an ASP page. Each row has a comment ImageButton. I already have the gridview and text box wrapped in a UpdatePanel. The gridview shows all of the correct information. I just need to add some code to populate the text box with the comment when a user clicks on that row's ImageButton.

The comments are stored in SQL 2005 DB if that makes a difference. Should I shove the comments inside a hidden field of the gridview or is there a function that will allow me to query the db for that specific comment.

End goal would be to not refresh the page if possible.

Your help is greatly appreciated to help me get over this writer's block!

Answer 1

Here is the markup...

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
        <tr class="dvrow" align="center">
         <td style="text-align:left;" colspan="2">History<br />
          <div id="div1" style="width:600px;">
            <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" 
                  GridLines="None" DataKeyNames="RepIssueHistoryID"
              DataSourceID="sqlIssueHistory" Width="600px" AllowSorting="True" 
                  AllowPaging="True" CssClass="grid"  RowStyle-Height="15px">
              <PagerStyle CssClass="footer" />
              <Columns>
                  <asp:TemplateField HeaderText="Mail">
                      <ItemTemplate>
                          <asp:CheckBox ID="chkMailComment" runat="server" />
                      </ItemTemplate>
                  </asp:TemplateField>
                <asp:BoundField DataField="RepIssueStatus" SortExpression="RepIssueStatus"  
                      HeaderText="Status" ItemStyle-Width="120px" >
<ItemStyle Width="120px"></ItemStyle>
                  </asp:BoundField>
                <asp:BoundField DataField="RepIssuePriority" SortExpression="RepIssuePriority"  
                      HeaderText="Priority" ItemStyle-Width="100px" >
<ItemStyle Width="100px"></ItemStyle>
                  </asp:BoundField>
                <asp:BoundField DataField="User" SortExpression="User"  HeaderText="Rep" 
                      ItemStyle-Width="180px" >
<ItemStyle Width="180px"></ItemStyle>
                  </asp:BoundField>
                <asp:BoundField DataField="DateUpdate" SortExpression="DateUpdate"  
                      HeaderText="Date" ItemStyle-Width="200px" >
<ItemStyle Width="200px"></ItemStyle>
                  </asp:BoundField>
                  <asp:TemplateField HeaderText="Comment">
                    <ItemTemplate>
                      <asp:ImageButton ID="btnComment" runat="server" ImageUrl="images/comment.gif" />
                    </ItemTemplate>
                  </asp:TemplateField>
                  <asp:TemplateField HeaderText="Attachment">
                    <ItemTemplate>
                      <asp:ImageButton ID="btnAttachment" runat="server"    ImageUrl="images/folder.gif" />
                    </ItemTemplate>
                  </asp:TemplateField>
              </Columns>
                <EmptyDataTemplate>
                  No history currently exists.<br />
                </EmptyDataTemplate>
    <RowStyle Height="15px"></RowStyle>

                <EmptyDataRowStyle CssClass="empty" />
            </asp:GridView>
          </div>
          </td>
        </tr>

        <tr class="dvrow" align="center">
          <td style="text-align:left;" colspan="2">Rep Comment<br />
            <asp:TextBox ID="txtComments" runat="server" TextMode="MultiLine" 
            Width="600px" Height="180px" ReadOnly="true"  />
          </td>
        </tr>
</ContentTemplate>
        </asp:UpdatePanel>

So the basic idea would be for someone to click on btnComment on whichever row and that comment would then show up in txtComment. Hope that explains it better.

Answer 2

OK, you could do this either way, with a HiddenField or by looking up in the DB.

HiddenField

In the ItemTemplate that contains the ImageButton, add CommandName and CommandArgument attributes to the ImageButton, and a HiddenField that is bound to the comment field from the database:

<asp:TemplateField HeaderText="Comment">
    <ItemTemplate>
        <asp:ImageButton ID="btnComment" runat="server" ImageUrl="images/comment.gif" CommandName="SelectComment" CommandArgument='<%# Container.DataItemIndex %>' />
        <asp:HiddenField runat="server" id="CommentHiddenField" Value='<%# Eval("Comment") %>' />
    </ItemTemplate>
</asp:TemplateField>

In the code-behind, add a method for handling the RowCommand event for the GridView:

Private Sub Gridview2_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles Gridview2.RowCommand

    Dim rowIndex As Integer
    Dim commentHiddenField As HiddenField

    If e.CommandName = "SelectComment" Then
        rowIndex = Integer.Parse(e.CommandArgument.ToString)

        commentHiddenField = DirectCast(Gridview1.Rows(rowIndex).Cells(5).FindControl("CommentHiddenField"), HiddenField)

        txtComments.Text = commentHiddenField.Value
    End If

End Sub

DB Lookup

Add the attributes to the ImageButton:

<asp:TemplateField HeaderText="Comment">
    <ItemTemplate>
        <asp:ImageButton ID="btnComment" runat="server" ImageUrl="images/comment.gif" CommandName="SelectComment" CommandArgument='<%# Container.DataItemIndex %>' />
    </ItemTemplate>
</asp:TemplateField>

In the code-behind, add a method for handling the RowCommand event for the GridView:

Private Sub Gridview2_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles Gridview2.RowCommand

    Dim rowIndex As Integer
    Dim key As String

    rowIndex = Integer.Parse(e.CommandArgument.ToString)

    key = Gridview1.DataKeys(rowIndex).Value.ToString

    txtComments.Text = GetCommentFromDB(key)
End Sub