Why GridView doesn't display data inside asp: Panel
I have the following page Default.aspx
(tab by default Status
and content
displayed on page load):
<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 corresponding one is content
displayed based on the click, which is controlled through JQuery. I am filling GridView
inside the content of the Status tab from the code 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 is loaded, it content
just displays THIS IS A STATUS
and nothing in GridView
, but if I take GridView
from content
and place somewhere else on the page, it will show the data that was obtained from the SQL Query.
Why is this happening and how can I solve it?
Debugger:
Not sure where the extra DIV is being created: /
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>
I don't know where it comes from JQuery################
...
source to share
The reason you can't see the gridview display is because your jquery is checking $("#content div:first").fadeIn();
#content div // references your main panel and tab1 panel
And the html generates another one <div>
for the gridview itself, which is not checked in your code. So change your script like below. I added $("#content div div:first").fadeIn();
to both conditions.
<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
$("#content div div:first").fadeIn(); // New code to show the gridview
$('#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();
$("#content div div:first").fadeIn(); // New code to show the gridview
});
});
</script>
This should display the first tab from the gridview on page load and again when you click on the link Status
. There might be a more complex solution than this, but this is what I came up with based on your code-behind approach.
source to share