RadGrid Item Missing Border when null

[Casey]

Hello,

I have a RadGrid populated from a method in a class file. When I bind the grid one of the columns is populated with a space, " ". For some reason, this causes the RadGrid to not place borders/gridlines around the items in that column. I've attached an example of what this looks like.

Any help would be appreciated.

Thanks,
Casey

[Princy]

Hello,

Sometimes, the cell border seems to disappear when the cell is empty, so probably you can add a white space( ) to the cell inorder to prevent this, as described in the forum.
C#:

protected void RadGrid2_PreRender(object sender, EventArgs e)
    {
        foreach (GridDataItem dataItem in RadGrid2.Items)
        {
            foreach (GridColumn col in RadGrid2.Columns)
            {
                if (dataItem[col.UniqueName].Text == string.Empty)
                    dataItem[col.UniqueName].Text += "&nbsp";
            }
        }
    }

Thanks,
Princy

[Casey]

Hi Princy,

This doesn't seem to be working. I forgot to mention that this is occuring in the GridTableView of a RadGrid. I tried modifying the code to reflect this, but it still doesn't work.

protected void RadGrid2_DetailTable_PreRender(object sender, EventArgs e)
    {
        foreach (GridDataItem dataItem in RadGrid2.MasterTableView.DetailTables[0].Items)
        {
            foreach (GridColumn col in RadGrid2.MasterTableView.DetailTables[0].Columns)
            {
                if (dataItem[col.UniqueName].Text == string.Empty)
                    dataItem[col.UniqueName].Text = "&nbsp";
            }
        }
    }

Thanks,
Casey

[Dimo]

Hello Casey,

The problem is caused by a browser limitation and the resolution is as Princy suggests. Here is one more related thread:

http://www.telerik.com/community/forums/aspnet-ajax/grid/border-not-displayed-if-cell-is-empty-in-internet-explorer.aspx

Note that   should have a semi-colon at the end. It is missing above.

Kind regards,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Casey]

What event do I need to do this in? I've tried doing it in the RadGrid PreRender, the PreRender of the GridTableView, the DataBound of the GridTableView, and in the DetailTableDataBind of the RadGrid, all with no success. For some reason the DataBound of the GridTableView event is never reached, and in the PreRender the Items.Count is 0, even though there are items in the GridTableView.

[Dimo]

Hi Casey,

One option in your case is to use ItemDataBound and iterate through the item's cells. Another option is to use PreRender and use a recursion:

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<script runat="server">

    protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable dt = new DataTable();
        DataRow dr;
        int colsNum = 4;
        int rowsNum = 2;
        string colName = "Column";

        for (int j = 1; j <= colsNum; j++)
        {
            dt.Columns.Add(String.Format("{0}{1}", colName, j));
        }

        for (int i = 1; i <= rowsNum; i++)
        {
            dr = dt.NewRow();

            for (int k = 1; k <= colsNum; k++)
            {
                dr[String.Format("{0}{1}", colName, k)] = " ";
            }
            dt.Rows.Add(dr);
        }

        (sender as RadGrid).DataSource = dt;
    }

    protected void RadGrid1_PreRender(object sender, EventArgs e)
    {
        foreach (GridItem item in (sender as RadGrid).MasterTableView.Items)
        {
            foreach (TableCell cell in item.Cells)
            {
                if (String.IsNullOrEmpty(cell.Text.Trim()))
                {
                    cell.Text = " ";
                }
            }
        }

        FixTableViewsRecursive((sender as RadGrid).MasterTableView);
    }

    protected void FixTableViewsRecursive(GridTableView tableView)
    {
        if (!tableView.HasDetailTables)
            return;

        foreach (GridItem item in tableView.GetItems(GridItemType.NestedView))
        {
            foreach (GridTableView tableViewInner in (item as GridNestedViewItem).NestedTableViews)
            {
                foreach (GridItem innerItem in tableViewInner.Items)
                {
                    foreach (TableCell cell in innerItem.Cells)
                    {
                        if (String.IsNullOrEmpty(cell.Text.Trim()))
                        {
                            cell.Text = " ";
                        }
                    }
                }
                FixTableViewsRecursive(tableViewInner);
            }
        }
    }

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    Width="800px"
    Skin="Office2007"
    OnNeedDataSource="RadGrid_NeedDataSource" OnPreRender="RadGrid1_PreRender">
    <MasterTableView HierarchyDefaultExpanded="true">
        <DetailTables>
            <telerik:GridTableView Width="100%" HierarchyDefaultExpanded="true">
                <DetailTables>
                    <telerik:GridTableView Width="100%" />
                </DetailTables>
            </telerik:GridTableView>
        </DetailTables>
    </MasterTableView>
</telerik:RadGrid>

</form>
</body>
</html>

Regards,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Casey]

That solution doesn't seem to work for my scenario either. Luckily I am able to populate all of the rows for that column with a value other than a space, so I don't experience this issue any more.

Thanks,
Casey

[VIRUX]

Hi ,

I've been facing grid cell border error with IE ..

after spending an hour ... finally able to fixed by 'Admin' Solution as the following... thanks

Note: Not able to set with " " .. I just add "NA" then it's working. 

protected void RadGrid1_PreRender(object sender, EventArgs e)
    {
        foreach (GridItem item in (sender as RadGrid).MasterTableView.Items)
        {
            foreach (TableCell cell in item.Cells)
            {
                if (String.IsNullOrEmpty(cell.Text.Trim()))
                {
                    cell.Text = " ";
                }
            }
        }

        FixTableViewsRecursive((sender as RadGrid).MasterTableView);
    }

I've tried 

----------

+ From Code behind to Redraw border like - Princy and Casey  - Not Working

+ By CSS Fixed   - Not Working

Trace Result 

===========

Some empty cell render as <td/>. I've set 'retrieve empty as dbnull = true"

some renter as <td> Text - Empty Text Node

The main difference is IE generated 'border-collapse' attribute to "Seperate" and other browser generate as 'Collapse'.

.RadGrid .rgMasterTable {border-collapse:collapse;}
.RadGrid_OutLook .rgMasterTable {border-collapse:collapse;}

Temp WorkAround

===============

Set manually on IE8 developer tools or firebug by 

 .radgrid .rgMasterTable : border-collapse : collapse;

[Dimo]

Hi VIRUX,

You need to set &nbsp; as text of empty cells, not " ". It seems that the string does not appear in the code snippets above, hence the confusion.

Greetings,
Dimo
the Telerik team

[sam starobin]

Let me get this straight, apparently IE has some 'bug' that's not letting the radgrid display these borders around the cell.  Ok, I could accept that if the regular gridview that comes with visual studio didn't have this problem...I mean even if the radgrid isn't based upon the gridview, it seems like something you guys should be able to fix, but instead it's been around for a couple years based on the threads I've read.

[Sebastian]

Hello Sam,

I think that the MS GridView suffers from the very same problem in this scenario under IE browser. Can you post an example illustrating side-by-side comparison between RadGrid and MS GridView (with the configuration discussed below) which renders borders for empty table cells for the GridView only?

Regards,
Sebastian
the Telerik team

[Vasssek]

Hello,

I've solved this issue by adding this custom CSS class on page:

Style definition applied just for IE7:

* +html .ShowEmptyCells_IE7Fix
{
    border-collapse:collapse !important;

}

Grid CSS addition:

<MasterTableView ShowFooter="false" EditMode="InPlace" CssClass="rgMasterTable ShowEmptyCells_IE7Fix">

Have a nice day...

Vasssek

[Andy]

There is another way.
You can edit inside the CSS if you use the custom Skin

.RadGrid_MySkin .rgMasterTable
{
    border-collapse:collapse !important;
}

Andy.