Is it possible to display a panel or div in between gridview rows on RowCommand event

Question

Hi, Currentaly I am using a gridView and on RowCommand event of gridview the details of selected row are displayed below the Gridview. But now I have to display the details just below the row clicked. Means it will be displayed in between the selected row and next row of it. The gridview code is as

    <asp:GridView ID ="gvUserDataReadOnly" AutoGenerateColumns ="false" runat ="server"   OnRowCommand ="gvUserDataReadOnly_RowCommand"  DataKeyNames ="Guid">
        <Columns >
            <asp:ButtonField ItemStyle-Width ="100px" DataTextField ="FirstName" HeaderText ="<%$ Resources:StringsRes,pge_ContactManager_FirstName %>" SortExpression ="FiratName" CommandName ="show_Details" ButtonType ="link" />
            <asp:ButtonField ItemStyle-Width ="100px" DataTextField ="LastName" HeaderText ="<%$ Resources:StringsRes,pge_ContactManager_LastName %>" SortExpression ="LastName" CommandName ="show_Details" ButtonType ="link" />                
            <asp:BoundField ItemStyle-Width ="100px" DataField ="TypeName" HeaderText ="<%$ Resources:StringsRes,pge_ContactManager_TypeName %>" SortExpression ="TypeId" />
        </Columns>
        <RowStyle Height="25px" />
        <HeaderStyle Height="30px"/>
    </asp:GridView>

and div tag which i want to display in betwwen rows is

<div id ="dvUserDatails" runat ="server" visible ="false" class ="eventcontent">
        <h2><asp:Literal ID ="ltUserName" runat ="server" ></asp:Literal></h2>
        <asp:Label Text ="Type : " runat ="server" ID ="Type"></asp:Label><asp:Literal ID ="ltType" runat ="server" ></asp:Literal><br />
        <asp:Label Text ="Address : " runat ="server" ID ="Address"></asp:Label><asp:Literal ID ="ltAddress" runat ="server" ></asp:Literal><br />
        <asp:Label Text ="Phone No : " runat ="server" ID ="PhoneNo"></asp:Label><asp:Literal ID ="ltPhoneNo" runat ="server" ></asp:Literal><br />
        <asp:Label Text ="Mobile No : " runat ="server" ID ="MobNo"></asp:Label><asp:Literal ID ="ltMobNo" runat ="server" ></asp:Literal><br />
        <asp:Label Text ="Email Id : " runat ="server" ID ="emailId"></asp:Label><asp:Literal ID ="ltemail" runat ="server" ></asp:Literal><br />
    </div>

I can't use EditItem Template as I am not using Edit button of gridview. Can anyone tell me how to do this task? Any other way to do this? Thanks in advance.

Answer 1

You probably want to use a Repeater and build the table yourself. I don't think that you'll be able to get a GridView to work as you can only control what goes in each row and what you want to do is alternate rows between general and detailed information. More information on how to connect it to your data source and handle the button clicks can be found at MSDN.

<asp:Repeater ID="gvUserDataReadOnly" runat="server" DataKeyNames="Guid">
   <HeaderTemplate>
      <table>
         <tr>
            <th>Header 1</th>
             ...
         </tr>
   </HeaderTemplate>
   <ItemTemplate>
       <tr>
          <td>
             ... first name button ...
          </td>
          ...
       </tr>
   </ItemTemplate>
   <AlternatingItemTemplate>
      <tr runat="server" visible="false">
         <td colspan="3">
            ... details (minus div) here ...
        </td>
      </tr>
   </AlternatingItemTemplate>
   <FooterTemplate>
      </table>
   </FooterTemplate>
</asp:Repeater>

Answer 2

Please refer to the following artice, that describes exactly what you want:
DataGrid and Details Using ASP.NET, C#, and JavaScript (Expand / Collapse Rows)

Answer 3

Yes - GridView can do exactly what you want.

<asp:GridView ...>
    <RowStyle ...>
    <Columns>
        <asp:TemplateField>
            <HeaderTemplate>
            </HeaderTemplate>
            <ItemTemplate>
            </ItemTemplate>
            <FooterTemplate>
            </FooterTemplate
        </asp:TemplateField>
    </Columns>    
</asp:GridView>

The HeaderTemplate and FooterTemplate are optional - I think even the ItemTemplate is optional. In any event, you can put anything inside those tags - even another gridview.