Search code examples
htmlasp.netgriditemtemplate

How do I hide/show a DIV inside a grid ItemTemplate?


I want to set individual DIVs inside a grid visible/hidden programmatically like so, but it isn't working. How would you fix this code?

            foreach (DataGridItem dgItem in dgW.Items)
            {

                HtmlGenericControl dvGoodRow =
                    (HtmlGenericControl)dgItem.FindControl("dvGoodRow");
                HtmlGenericControl dvBadRow =
                    (HtmlGenericControl)dgItem.FindControl("dvBadRow");

                dvGoodRow.Visible = true;
                dvBadRow.Visible = false;
            }

Debug sessions show that the Visible attribute I set above does take effect at least in my watch window, but visually on the browser I see no change. I have a grid like the one below:

<asp:datagrid id="dgW" AutoGenerateColumns="False" ShowHeader="False" ShowFooter="False" runat="server" DataKeyField="SID" CellPadding="0" GridLines="None" AllowSorting="True" OnItemDataBound="dgW_ItemDataBound">
    <HeaderStyle />
    <FooterStyle>
    </FooterStyle>
    <Columns>
        <asp:TemplateColumn HeaderText="SID" SortExpression="SID">
            <ItemTemplate>
                <asp:Label ID="lblSID" Runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "SID") %>'></asp:Label>
            </ItemTemplate>
            <FooterTemplate>
            </FooterTemplate>
        </asp:TemplateColumn>
        <asp:TemplateColumn HeaderText="Extension" SortExpression="ExtensionStopDate">
            <ItemTemplate>
                <asp:Label id="lblExtensionStopDate" Runat="server" text='<%# String.Format("{0:MM/dd/yyyy}", DataBinder.Eval(Container.DataItem, "ExtensionStopDate"))%>'></asp:Label>
            </ItemTemplate>
            <FooterTemplate>
            </FooterTemplate>
        </asp:TemplateColumn>  
        <asp:TemplateColumn>
            <ItemTemplate>
                <div id="dvGoodRow" runat="server" hidden>
                    <div>
                        <asp:Label runat="server" ID="lblGoodRow">
                            <i id="icnGoodRow" runat="server"></i>
                        </asp:Label>
                    </div>
                </div>
                <div id="dvBadRow" runat="server" hidden>       
                    <div>
                        <asp:Label runat="server" ID="lblBadRow">
                            <i id="icnBadRow" runat="server"></i>
                        </asp:Label>
                    </div>                      
                </div>                        
            </ItemTemplate>
        </asp:TemplateColumn>                     
    </Columns>
</asp:datagrid>

Solution

  • Here's what I ended up doing to fix the code: I switched to showing/hiding ASP.NET Panels instead of DIVs!

                <asp:TemplateColumn>
                    <ItemTemplate>
                        <asp:Panel runat="server" ID="pnlGoodRow" Visible="False">
                            <div id="dvGoodRow">
                                <asp:Label runat="server" ID="lblGoodRow">
                                    <i id="icnGoodRow" runat="server"></i>
                                </asp:Label>
                            </div>
                        </asp:Panel>
                        <asp:Panel runat="server" ID="pnlBadRow" Visible="False">      
                            <div id="dvBadRow">
                                <asp:Label runat="server" ID="lblBadRow">
                                    <i id="icnBadRow" runat="server"></i>
                                </asp:Label>
                            </div>                      
                        </asp:Panel>                        
                    </ItemTemplate>    
                </asp:TemplateColumn>                     
    

    So in the code, I now hide/show the Panel elements instead of DIVs:

            foreach (DataGridItem dgItem in dgW.Items)
            {
                System.Web.UI.WebControls.Panel pnlGoodRow =
                    (System.Web.UI.WebControls.Panel)dgItem.FindControl("pnlGoodRow");
                System.Web.UI.WebControls.Panel pnlBadRow =
                    (System.Web.UI.WebControls.Panel)dgItem.FindControl("pnlBadRow");
    
                pnlGoodRow.Visible = true;
                pnlBadRow.Visible = false;
            }
    

    This works!