3

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:

enter image description here

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...

3
  • are you setting tab1.Visible = false in the code behind? Commented Aug 4, 2014 at 19:19
  • Is there any jquery script or css that's making the visibility of the tab that has the gridview? Commented Aug 4, 2014 at 19:20
  • It is weird because when I look at the source, there is a DIV that is being added and being set as Display: none... hmmmmmmm I have updated my question. Commented Aug 4, 2014 at 19:21

2 Answers 2

1

The reason you're not seeing the gridview displayed is because your jquery checks for $("#content div:first").fadeIn();

#content div // references your main panel and tab1 panel

And the html generates another <div> for the gridview itself which is not checked in your code. So change your script as below. I added $("#content div div:first").fadeIn(); to both the 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 with gridview upon page load and again when you click on the Status link. There could be more sophisticated solution than this but this is what I came up with based on your code approach.

Sign up to request clarification or add additional context in comments.

Comments

1

Make sure you have data. See this link to test if you have data or not

3 Comments

I do have Data as I can see it outside. I think somehow the CSS is making the DIV to hidden... :/
Nonetheless, I'd put there in your code. There is no harm to it.
Something to do with the setting hidden or visible through JQuery is causing the GridView to not show up?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.