How to implement tabs in gridview webpart

Question

Hi,

I have a grid view with multiple rows. User needs like: If click on Tab1 then row1 will be diaplayed, click on Tab2 then row2 will be displayed and so on...

How should I implement the tabs in gridview so that I can achieve this. And from my below code snippet how can I identify the rows and implement the tabs for the corresponding rows.

<table>
    <tr>
        <td  align="center">
            <asp:Label ID="lblErrorStatus" runat="server" ForeColor="Red"></asp:Label>
        </td>
    </tr>  
    <tr>   
        <td>
            <asp:GridView ID="gvMail" runat="server" AutoGenerateColumns="False" Width="500px"
                AllowPaging="false" AllowSorting="True" PageSize="5" OnPageIndexChanging="gvMail_PageIndexChanging"
                OnSorting="gvMail_Sorting" HorizontalAlign="Left" 
                UseAccessibleHeader="false" >
                <Columns>

                
                    <asp:BoundField DataField="ID" HeaderText="ID"
                         ItemStyle-HorizontalAlign="Left" />
                   
                      <asp:HyperLinkField DataNavigateUrlFields="LinkFilename" datanavigateurlformatstring="~/Pages/{0}"
                          DataTextField="Headline" />
                      
                       <asp:BoundField DataField="Summary" HeaderText="Summary"
                        SortExpression="Summary" ItemStyle-HorizontalAlign="Left"/>
                       
                       <asp:TemplateField HeaderText="Image" ItemStyle-HorizontalAlign="Left">         
                        <ItemTemplate>
                            <asp:Image ID="Image1"  runat="server" ImageUrl='<%# "~/" + Eval("PublishingRollupImage") %>'/>
                        </ItemTemplate>
                       </asp:TemplateField>
                               
                      
                </Columns>                       
            </asp:GridView>
        </td>
    </tr>
    <tr>
        <td align="center">
            <asp:Button ID="btnSelectIds" runat="server" Text="Update Items" OnClick="btnSelectIds_Click" />
        </td>
     
    </tr>
     <tr>
        <td  align="center">
            <asp:Label ID="lblSelectedEmails" runat="server" ForeColor="Green"></asp:Label>
        </td>
    </tr>  
</table>

---

Knowledge is power.

Answer 1

Hi Manoj,

Do you means your tab is in your Gridview? Or your Gridview is in your tab? So, you should transmit parameters to the codebehind, then you can use attribute of the “Visible” In gridview.

this.GridView1.Rows[0].Visible = false;

You can also refer Ext.Net(http://examples.ext.net/#/Panel/Basic/Deferred_Loading/ ) tab or the following link.

http://demos.telerik.com/aspnet-ajax/tabstrip/examples/applicationscenarios/loadondemand/defaultcs.aspx

Thanks,

Jack