CODEWITHSUNDEEP
c#htmlasp.netgridview
SearchForKnowledge
SearchForKnowledge

Reputation: 3751

Why is GridView not displaying data inside a asp:Panel

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

Upvotes: 3

Views: 1305

Answers (2)

Dennis R
Dennis R

Reputation: 3237

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.

Upvotes: 1

Zuzlx
Zuzlx

Reputation: 1266

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

Upvotes: 1

Related Questions