This is a migrated thread and some comments may be shown as answers.

RadGrid Item Missing Border when null

12 Answers 261 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Casey
Top achievements
Rank 1
Casey asked on 11 May 2010, 01:11 PM
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

12 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 1
answered on 11 May 2010, 01:34 PM
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
0
Casey
Top achievements
Rank 1
answered on 11 May 2010, 02:01 PM
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
0
Dimo
Telerik team
answered on 11 May 2010, 02:22 PM
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.
0
Casey
Top achievements
Rank 1
answered on 11 May 2010, 03:12 PM
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.
0
Dimo
Telerik team
answered on 12 May 2010, 09:54 AM
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"
 
<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.
0
Casey
Top achievements
Rank 1
answered on 12 May 2010, 02:31 PM
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
0
VIRUX
Top achievements
Rank 1
answered on 06 Jul 2010, 07:26 AM
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;  


0
Dimo
Telerik team
answered on 06 Jul 2010, 07:51 AM
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
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
0
sam starobin
Top achievements
Rank 1
answered on 05 Aug 2010, 10:55 PM
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.
0
Sebastian
Telerik team
answered on 06 Aug 2010, 10:55 AM
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
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
0
Vasssek
Top achievements
Rank 1
answered on 07 Aug 2010, 08:21 AM
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
0
Andy
Top achievements
Rank 1
answered on 07 Jan 2011, 05:47 PM
There is another way.
You can edit inside the CSS if you use the custom Skin

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

Andy.
Tags
Grid
Asked by
Casey
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
Casey
Top achievements
Rank 1
Dimo
Telerik team
VIRUX
Top achievements
Rank 1
sam starobin
Top achievements
Rank 1
Sebastian
Telerik team
Vasssek
Top achievements
Rank 1
Andy
Top achievements
Rank 1
Share this question
or