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

Question

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>

Answer 1

Remove that 'hidden' property and use visible
<div id="dvGoodRow" runat="server" visible="false">
<div id="dvBadRow" runat="server" visible="false">

Answer 2

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!