I have the following in my Default.aspx page (By default the Status tab and it's content is shown when the page loads):
<asp:Content runat="server" ID="FeaturedContent3" ContentPlaceHolderID="ContentMain">
<div style="padding-left: 10px; padding-top: 10px;">
<asp:BulletedList ID="tabs" ClientIDMode="Static" runat="server" DisplayMode="HyperLink">
<asp:ListItem Text="Status" Value="#tab1"></asp:ListItem>
<asp:ListItem Text="Your Tasks" Value="#tab2"></asp:ListItem>
<asp:ListItem Text="Messages" Value="#tab3"></asp:ListItem>
<asp:ListItem Text="Dependencies" Value="#tab4"></asp:ListItem>
<asp:ListItem Text="Documents" Value="#tab5"></asp:ListItem>
<asp:ListItem Text="Pro-Forma" Value="#tab6"></asp:ListItem>
<asp:ListItem Text="Admin Controls" Value="#tab7"></asp:ListItem>
</asp:BulletedList>
<asp:Panel ID="content" runat="server" ClientIDMode="Static">
<asp:Panel ID="tab1" ClientIDMode="Static" runat="server">THIS IS A STATUS
<asp:GridView ID="yourTasksGV" runat="server" ClientIDMode="Static">
</asp:GridView>
</asp:Panel>
<asp:Panel ID="tab2" ClientIDMode="Static" runat="server">THIS IS YOUR TASKS
</asp:Panel>
<asp:Panel ID="tab3" ClientIDMode="Static" runat="server">THIS IS A MESSAGE</asp:Panel>
<asp:Panel ID="tab4" ClientIDMode="Static" runat="server">THIS IS A DEPENDENCIES</asp:Panel>
<asp:Panel ID="tab5" ClientIDMode="Static" runat="server">THIS IS A DOCUMENT</asp:Panel>
<asp:Panel ID="tab6" ClientIDMode="Static" runat="server">THIS IS A PRO-FORMA</asp:Panel>
<asp:Panel ID="tab7" ClientIDMode="Static" runat="server">THIS IS A ADMIN CONTROLS</asp:Panel>
</asp:Panel>
</div>
</asp:Content>
The respective content is shown based on the tab that is clicked, which is controlled through JQuery. I am populating the GridView inside the Status tab content from code-behind for Default.aspx:
public void PullData()
{
DataTable taskData = new DataTable();
string connString = @"user id = myid1;" + "password= myP@$$w0Rd; server= dev-mag; database= Ob;" + "connection timeout=30";
string query = @"SELECT column1, column2, column3, column4, column5
FROM dbo.table13934";
using (SqlConnection conn = new SqlConnection(connString))
{
try
{
SqlCommand cmd = new SqlCommand(query, conn);
// create data adapter
SqlDataAdapter da = new SqlDataAdapter(query, conn);
// this will query your database and return the result to your datatable
da.Fill(taskData);
//conn.Close();
yourTasksGV.DataSource = taskData;
yourTasksGV.DataBind();
}
catch (Exception ex)
{
string error = ex.Message;
}
}
}
protected void Page_Load(object sender, EventArgs e)
{
PullData();
}
When the page loads, the content just displays THIS IS A STATUS and nothing in the GridView but if I take the GridView out of the content and place anywhere else on the page, it shows the data that was retrieved from the SQL Query.
Why is this happening and how can I resolve it?
Debugger:

Not sure where the extra DIV is being created from :/
This is the Jquery code:
<script type="text/javascript">
$(document).ready(function () {
$("#content div").hide(); // Initially hide all content
$("#tabs li:first").attr("id", "current"); // Activate first tab
$("#content div:first").fadeIn(); // Show first tab content
$('#tabs a').click(function (e) {
e.preventDefault();
$("#content div").hide(); //Hide all content
$("#tabs li").attr("id", ""); //Reset id's
$(this).parent().attr("id", "current"); // Activate this
//$('#' + $(this).attr('title')).fadeIn(); // Show content for current tab
$($(this).attr('href')).fadeIn();
});
});
</script>
Not sure where the JQuery################ is coming from...
tab1.Visible = falsein the code behind?Display: none... hmmmmmmm I have updated my question.