Hide and show div tag in a gridview based on the value of griview column

Question

How can I show and hide div tag inside gridview based on the value of the column?

For example if a column has a value of 1, then it should display a particular div and the hide the other

Here is the error below

I tried this and it did not work.

<asp:GridView ID="UsersGrid" runat="server" GridLines="None" AllowPaging="true" HeaderStyle-ForeColor="#224f6d" HeaderStyle-Font-Size="11pt" RowStyle-Font-Size="10pt" OnPageIndexChanging="OnPageIndexChanging"
    AutoGenerateColumns="false" OnSelectedIndexChanged="OnSelectedIndexChanged" OnRowDataBound="OnRowDataBound" DataKeyNames="Name" PageSize="7" CssClass="table" Width="100%" HeaderStyle-HorizontalAlign="left" RowStyle-HorizontalAlign="Left">
    <EmptyDataTemplate>
        <div style="text-align: center; font-weight: 500; font-size: medium;">
            <asp:Label ID="labelTemp" runat="server" Text="No Team Member"></asp:Label>
        </div>
    </EmptyDataTemplate>
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:CheckBox ID="Checksuspend" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Name" HeaderText="Organization" HeaderStyle-Font-Bold="false" />
        <asp:BoundField DataField="email" HeaderText="Email" ReadOnly="true" HeaderStyle-Font-Bold="false" />
        <asp:BoundField DataField="CreatedDate" HeaderText="Date Joined" ReadOnly="true" HeaderStyle-Font-Bold="false" />
         <asp:BoundField DataField="Suspend" HeaderText="Action" ReadOnly="true" HeaderStyle-Font-Bold="false" />
        <asp:TemplateField HeaderText="Status" HeaderStyle-Font-Bold="false">
            <ItemTemplate>
                <asp:UpdatePanel runat="server">
                    <ContentTemplate>
                        <div class="badge badge-pill badge-success" runat="server" id="active" style="font-weight: 500; font-size: 9pt;">Active</div>
                        <div class="badge badge-pill badge-info" runat="server" id="blocked" style="font-weight: 500; font-size: 9pt;">Suspended</div>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.Header)
    {
        e.Row.Cells[3].Visible = false;
    }
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        for (int i = 1; i < e.Row.Cells.Count; i++)
        {
            e.Row.Cells[i].Attributes["onclick"] = Page.ClientScript.GetPostBackClientHyperlink(UsersGrid, "Select$" + e.Row.RowIndex);
            e.Row.Cells[i].Style.Add("cursor", "pointer");
            e.Row.Cells[i].ToolTip = "View Details.";
 
            e.Row.Cells[3].Visible = false;
            Suspend = e.Row.Cells[4].Text;
            if (Suspend = "1")
            {
                blocked.Visible = true;
                active.Visible = false;
            }
            else
            {
                blocked.Visible = false;
                active.Visible = true;
            }
        }
    }
}

Answer 1

Hi @Donald Symmons,

You put div inside itemtemplate so you need to use <div> belonging to HtmlGenericControl via e.Row property FindControl.

 HtmlGenericControl blocked = (HtmlGenericControl)e.Row.FindControl("blocked");

 HtmlGenericControl active = (HtmlGenericControl)e.Row.FindControl("active");

FULL CODE

protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.Header)
            {
                e.Row.Cells[3].Visible = false;
            }
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                for (int i = 1; i < e.Row.Cells.Count; i++)
                {
                    e.Row.Cells[i].Attributes["onclick"] = Page.ClientScript.GetPostBackClientHyperlink(UsersGrid, "Select$" + e.Row.RowIndex);
                    e.Row.Cells[i].Style.Add("cursor", "pointer");
                    e.Row.Cells[i].ToolTip = "View Details.";

                    e.Row.Cells[3].Visible = false;
                    string Suspend = e.Row.Cells[4].Text;
                    HtmlGenericControl blocked = (HtmlGenericControl)e.Row.FindControl("blocked");
                    HtmlGenericControl active = (HtmlGenericControl)e.Row.FindControl("active");
                    if (Suspend == "1")
                    {
                        blocked.Visible = true;
                        active.Visible = false;
                    }
                    else
                    {
                        blocked.Visible = false;
                        active.Visible = true;
                    }
                }
            }
        }

Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.