Gridview does not shows up in Repeater

Question

I am having problem with repeater and extensiblecollapsible panel extender in C#. What I am trying to do is inside the repeater1, I get all the category name and display as a label at extensible panel extender. As for the repeater2, I get all the product based on category and display in grid view. Here is how I set up my collapsible panel extender:

<asp:Repeater ID="Repeater1" runat="server">
                    <ItemTemplate>
                        <!-- COLLAPSIBLE PANEL EXTENDER -->
                        <asp:Panel ID="pHeader1" runat="server" CssClass="cpHeader">
                            <!-- Collapsible panel extender header -->
                                        <asp:Label ID="lblCategory" Text='<%# DataBinder.Eval(Container.DataItem, "categoryName") %>' runat="server" />
                                        <asp:Label ID="lblHeaderText1" runat="server" />
                                        <asp:Image ID="imgArrows1" Text="IMAGE" runat="server" />
                        </asp:Panel>
                        <!-- Collapsible panel extender body -->
                        <asp:Panel ID="pBody1" runat="server" CssClass="cpBody">
                            <asp:Label ID="lblBodyText1" runat="server" />
                            <asp:Repeater ID="Repeater2" runat="server" OnItemDataBound="Repeater2_ItemDataBound">
                                <ItemTemplate>
                                    <asp:GridView ID="gvProduct" runat="server" AutoGenerateColumns="False">
                                        <Columns>
                                            <asp:BoundField DataField="id" HeaderText="ID" />
                                            <asp:BoundField DataField="name" HeaderText="Name" />
                                            <asp:BoundField DataField="categoryName" HeaderText="Category" />
                                            <asp:BoundField DataField="inventoryQuantity" HeaderText="Quantity" />
                                        </Columns>
                                    </asp:GridView>
                                </ItemTemplate>
                            </asp:Repeater>
                        </asp:Panel>
                        <asp:CollapsiblePanelExtender ID="cpe1" runat="server" TargetControlID="pBody1" CollapseControlID="pHeader1"
                            ExpandControlID="pHeader1" Collapsed="true" ImageControlID="imgArrows1"
                            CollapsedImage="~/Images/downarrow.jpg"
                            ExpandedImage="~/Images/uparrow.jpg" TextLabelID="lblHeaderText1" CollapsedText="Show"
                            ExpandedText="Hide" CollapsedSize="0" ExpandedSize="200"
                            ScrollContents="true">
                        </asp:CollapsiblePanelExtender>
                    </ItemTemplate>
                </asp:Repeater>

And for the code behind, this is how I get my category:

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            categoryList = packBLL.getAllCategory();
            Repeater1.DataSource = categoryList;
            Repeater1.DataBind();
        }
    }

And for the repeater2, I must get the lblCategory to determine which category the products belong to:

  protected void Repeater2_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        // This event is raised for the header, the footer, separators, and items.

        Label lblCategory = (Label)e.Item.FindControl("lblCategory");
        string category = lblCategory.Text;
        //Execute the following logic for Items and Alternating Items.
        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
        {
            GridView gv = (GridView)e.Item.FindControl("gvProduct") as GridView;
            if (gv != null)
            {
                List<ProductPacking> prodList = new List<ProductPacking>();
                prodList = packBLL.getAllProductByCategory(category);
                for (int i = 0; i < prodList.Count; i++)
                {
                    DataRowView drv = (DataRowView)e.Item.DataItem;
                    gv.DataSource = drv[prodList[i].id]; ;
                    gv.DataBind();
                }
            }
        }
    }

However, when I run the page, it only shows up with the category but not the grid view inside each collapsible panel extender. I wonder am I doing in the wrong way.

Thanks in advance.

Answer 1

As per our discussion, you need to rewrite it entirely. So below is merely a suggestion:

<asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound">
    <ItemTemplate>
        <!-- COLLAPSIBLE PANEL EXTENDER -->
        <asp:Panel ID="pHeader1" runat="server" CssClass="cpHeader">
            <!-- Collapsible panel extender header -->
                        <asp:Label ID="lblCategory" Text='<%# DataBinder.Eval(Container.DataItem, "categoryName") %>' runat="server" />
                        <asp:Label ID="lblHeaderText1" runat="server" />
                        <asp:Image ID="imgArrows1" Text="IMAGE" runat="server" />
        </asp:Panel>
        <!-- Collapsible panel extender body -->
        <asp:Panel ID="pBody1" runat="server" CssClass="cpBody">
            <asp:Label ID="lblBodyText1" runat="server" />
            <asp:GridView ID="gvProduct" runat="server" AutoGenerateColumns="False">
                <Columns>
                    <asp:BoundField DataField="id" HeaderText="ID" />
                    <asp:BoundField DataField="name" HeaderText="Name" />
                    <asp:BoundField DataField="categoryName" HeaderText="Category" />
                    <asp:BoundField DataField="inventoryQuantity" HeaderText="Quantity" />
                </Columns>
            </asp:GridView>
        </asp:Panel>
        <asp:CollapsiblePanelExtender ID="cpe1" runat="server" TargetControlID="pBody1" CollapseControlID="pHeader1"
            ExpandControlID="pHeader1" Collapsed="true" ImageControlID="imgArrows1"
            CollapsedImage="~/Images/downarrow.jpg"
            ExpandedImage="~/Images/uparrow.jpg" TextLabelID="lblHeaderText1" CollapsedText="Show"
            ExpandedText="Hide" CollapsedSize="0" ExpandedSize="200"
            ScrollContents="true">
        </asp:CollapsiblePanelExtender>
    </ItemTemplate>
</asp:Repeater>

In the code-behind:

public void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs  e)
{
    if(e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {   
        GridView gvProduct = (GridView)e.Item.FindControl("gvProduct");
        DataRowView drv = (DataRowView)e.Item.DataItem;
        gvProduct.DataSource = drv[prodList[i].id];
        gvProduct.DataBind();
    }
}