[Solved] Background of Cell Disappears (IE Only)

[Shrinath]

I "Hide" buttons based on some criteria within the cell and it looks fine in Firefox, but in IE the background of the cell disappears. Attached you will find the output in IE and here is my grid:

@(Html.Telerik().Grid<agentrole>(Model)
        .Name("Role")
        .Columns(columns => {
            columns.Command(commands => {
                commands
                    .Delete()
                    .ButtonType(TelerikGrid.BUTTON_TYPE)
                    .HtmlAttributes(new { @class = "btn" });
                })
                .HtmlAttributes(new { @class = "center" })
                .Visible(PermissionHelper.HasPermission(myUserInfo, Permission.ROLE_DELETE));
            columns.Command(commands =>
                    commands.Custom("MoveUsers")
                    .Text("Move Users")
                    .HtmlAttributes(new { @class = "btn" })
                    .DataRouteValues(route => route.Add(r2 => r2.agrCode).RouteKey("oldRoleId"))
                    .Action("MoveUsers", "Role")
                )
                .Visible(PermissionHelper.HasPermission(myUserInfo, Permission.MOVE_USERS_TO_NEW_ROLE))
                .HtmlAttributes(new { @class = "center" });
        })
        .CellAction(cell => {
            if (cell.DataItem.agrCode.Equals(cell.DataItem.agrCode) && cell.Column == cell.Grid.Columns[2] &&
                cell.DataItem.agents.Where(a => a.flag == Flag.Active).Count<agent>() > 0) {
                cell.HtmlAttributes["class"] = "hidden";
            }
            if (cell.DataItem.agrCode.Equals(cell.DataItem.agrCode) && cell.Column == cell.Grid.Columns[3] &&
                cell.DataItem.agents.Where(a => a.flag == Flag.Active).Count<agent>() <= 0) {
                cell.HtmlAttributes["class"] = "hidden";
            }
        })
)

.hidden
{
    content:".";
    visibility:hidden;
}

So I basically apply the "hidden" class attribute to the cell whenever the criteria is true. Any clue how I can keep the backgorund in the cell in a clean way?

[Dimo]

Hello Shrinath,

The observed behavior is a result of an IE limitation - this browser cannot display borders and backgrounds for empty table cells. Your only option is to keep some content always inside the cell, e.g. at least a  . Depending on the scenario, you can do this by using templates, inject content with Javascript, or your way with CSS. Note that your workaround will not work in older IE versions (e.g. IE7).

Standard-compliant browsers support the empty-cells CSS property, which defines how empty cells should be handled.

Kind regards,
Dimo
the Telerik team