[Solved] Grid styling of empty cells in IE8

[Tim]

There seems to be a difference in how the cells are generated when using server binding vs client ajax binding.

In server binding if the column is blank, the cell is rendered as <td>&nbsp;</td>.
In Ajax client binding if the column is blank, the cell is rendered as <td/>.

Normally the schematic difference would not be concerning, however in IE8, it causes differences in how the borders are rendered...
In server binding, the left border is present, in AJAX client binding the border-collapse: separate causes the left border to disappear.

Is there a way to force the Ajax client binding to render the cell as <td>&nbsp;</td>  so the borders display properly in IE8?

-Tim

[Dimo]

Hello Tim,

You can use the following workaround as a Grid OnDataBound handler:

function addNbsp() {
        $(this).find("td:empty").html(" ");
}

So far we have refrained from implementing this workaround out-of-the-box for a couple of reasons. First, the issue exists only in IE6 and IE7. If we add &nbsp; only in these browsers, then there will be different behavior (output) in the Grid, which is not expected. On the other hand, if we add &nbsp; in all browsers, this will impose unneeded performance penalty.

Server binding is a different story, that's why we add a &nbsp; there unconditionally for empty data.

Regards,
Dimo
the Telerik team

[Tim]

Thanks... Simple workaround and seems to work perfectly...