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:

enter image description here

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

...

+3


source to share


2 answers


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.

+1


source


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



+1


source







All Articles