RadGrid GridHeaderItem visible=false is still using up screen space

[Andrew]

I'm trying hide a couple of columns in a RadGrid. I can do this in RadGrid1_ItemDataBound with the GrdiHeaderItem setting visible = false.

However, the output still uses space for the 2 columns that were hidden at the end of the grid.

Looking at the page source when I run my app there are 2 extra <col /> tags in <colgroup> and the <tfoot> tag has 2 extra <td></td> tags. There is the correct number of <td> tags in each row in <tr> in the table body.

Could this be from css? Is there a way in override this in RadGrid1_ItemDataBound manually?

[Rumen]

Hi Andrew,

When you hide columns by setting Visible = false on the GridHeaderItem, the column structure (<col> tags) and footer <td> tags are still being rendered, causing unwanted space.
The issue occurs because setting Visible = false on individual header cells in ItemDataBound only hides those specific cells, not the entire column definition. The column itself is still marked as visible, which is why the <colgroup> structure and <tfoot> cells are still rendered.

Instead of hiding header cells, you need to set the Visible property directly on the column object itself. Here are the recommended approaches:

Option 1: Hide in Page_Load (Recommended)

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        RadGrid1.MasterTableView.GetColumn("ColumnUniqueName").Visible = false;
        // or by index
        RadGrid1.MasterTableView.Columns[2].Visible = false;
    }
}

Option 2: Hide in PreRender (if you need to evaluate data first)

protected void RadGrid1_PreRender(object sender, EventArgs e)
{
    RadGrid1.MasterTableView.GetColumn("ColumnUniqueName").Visible = false;
}

Option 3: Use Display Property (for client-side show/hide scenarios)

RadGrid1.MasterTableView.GetColumn("ColumnUniqueName").Display = false;

 

In short, simply replace your ItemDataBound logic with this in Page_Load:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // Replace with your actual column UniqueNames
        RadGrid1.MasterTableView.GetColumn("YourColumn1").Visible = false;
        RadGrid1.MasterTableView.GetColumn("YourColumn2").Visible = false;
    }
}

This will completely remove the columns from rendering, eliminating the extra <col> tags and footer cells.

You can check this forum for more information: https://www.telerik.com/forums/could-not-able-hide-the-column. 

Regards,
Rumen
Progress Telerik

[Andrew]

Thanks so much for the quick reply and explanation. I'll give this a try.

Thanks

Andrew

[Andrew]

These examples didn't work for me but I think it's because of how I have my RadGrid setup.

<telerik:RadGrid ID="RadGrid1" runat="server" Width="100%" OnItemDataBound="RadGrid1_ItemDataBound" OnNeedDataSource="RadGrid1_NeedDataSource" CellSpacing="0" CellPadding="0" Skin="Metro" BorderWidth="0px" BorderStyle="None" ShowFooter="True">
    <ClientSettings EnableAlternatingItems="False" EnableRowHoverStyle="True">
        <Scrolling UseStaticHeaders="true" AllowScroll="False" />
        <Selecting CellSelectionMode="None" AllowRowSelect="True"></Selecting>
    </ClientSettings>                            
    <FilterMenu EnableImageSprites="False"></FilterMenu>
    <HeaderStyle BackColor="#E0E0E0" BorderWidth="0px"></HeaderStyle>                            
</telerik:RadGrid>

Everything else is defined manually in RadGrid1_NeedDataSource and RadGrid1_ItemDataBound. I have to be able to format the data rows differently based one of the columns.

In RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e) I can change the formatting of each value using by testing...

if (e.Item is GridHeaderItem)
{
     // Format Header items
     GridHeaderItem HeaderItem = e.Item as GridHeaderItem;
}

if (e.Item is GridDataItem)
{
     // Format Data row items
     GridDataItem RowItem = e.Item as GridDataItem;
}

Is there some sort of equivalent for Column Items?

[Rumen]

Hi Andrew,

Thank you for the additional details about your setup. Let me answer your question directly:

Q: Is there some sort of equivalent for Column Items?

A: There is no "Column Item" equivalent in RadGrid.

Columns are objects, not items:

• Items (fire in ItemDataBound): GridHeaderItem, GridDataItem, GridFooterItem
  
• Columns (accessed as objects): GridColumn, GridBoundColumn, etc.
  

You access columns through the Columns collection or GetColumn() method, not through an event like ItemDataBound. Since you're creating columns manually in NeedDataSource and formatting in ItemDataBound, here's the correct approach:

Option 1: Hide Immediately After Creating (Recommended)

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    // 1. Clear and create columns
    RadGrid1.MasterTableView.Columns.Clear();
    
    GridBoundColumn col1 = new GridBoundColumn();
    col1.DataField = "Field1";
    col1.HeaderText = "Field 1";
    col1.UniqueName = "Field1";
    RadGrid1.MasterTableView.Columns.Add(col1);
    
    GridBoundColumn col2 = new GridBoundColumn();
    col2.DataField = "Field2";
    col2.HeaderText = "Field 2";
    col2.UniqueName = "Field2";
    RadGrid1.MasterTableView.Columns.Add(col2);
    
    GridBoundColumn col3 = new GridBoundColumn();
    col3.DataField = "Field3";
    col3.HeaderText = "Field 3";
    col3.UniqueName = "Field3";
    RadGrid1.MasterTableView.Columns.Add(col3);
    
    GridBoundColumn col4 = new GridBoundColumn();
    col4.DataField = "Field4";
    col4.HeaderText = "Field 4";
    col4.UniqueName = "Field4";
    RadGrid1.MasterTableView.Columns.Add(col4);
    
    // 2. HIDE COLUMNS RIGHT AFTER CREATING THEM
    col3.Visible = false;  // Completely removes Field3 from rendering
    col4.Visible = false;  // Completely removes Field4 from rendering
    
    // 3. Bind data
    RadGrid1.DataSource = GetYourData();
}

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
    // Your existing formatting code continues to work exactly as before
    if (e.Item is GridHeaderItem)
    {
        GridHeaderItem headerItem = e.Item as GridHeaderItem;
        // Format header items
    }
    
    if (e.Item is GridDataItem)
    {
        GridDataItem rowItem = e.Item as GridDataItem;
        
        // ✓ IMPORTANT: You can still access Field3/Field4 data even though columns are hidden!
        DataRowView rowView = (DataRowView)rowItem.DataItem;
        string field3Value = rowView["Field3"].ToString();
        string field4Value = rowView["Field4"].ToString();
        
        // Use hidden field values to format visible columns
        if (field3Value == "SomeCondition")
        {
            rowItem["Field1"].BackColor = System.Drawing.Color.LightGray;
        }
        
        if (field4Value == "AnotherCondition")
        {
            rowItem["Field2"].ForeColor = System.Drawing.Color.Red;
        }
    }
}

Option 2: Hide in PreRender (If You Need to Decide Based on Data)
If you need to determine which columns to hide based on the actual data or conditions evaluated during binding:

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    // Create all columns (don't hide them yet)
    RadGrid1.MasterTableView.Columns.Clear();
    // ... create all columns ...
    RadGrid1.DataSource = GetYourData();
}

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
    // Your existing formatting logic
}

protected void RadGrid1_PreRender(object sender, EventArgs e)
{
    // HIDE COLUMNS JUST BEFORE RENDERING
    // This runs AFTER NeedDataSource and ItemDataBound
    RadGrid1.MasterTableView.GetColumn("Field3").Visible = false;
    RadGrid1.MasterTableView.GetColumn("Field4").Visible = false;
}

Add OnPreRender="RadGrid1_PreRender" to your RadGrid markup:

<telerik:RadGrid ID="RadGrid1" runat="server" 
    OnNeedDataSource="RadGrid1_NeedDataSource"
    OnItemDataBound="RadGrid1_ItemDataBound"
    OnPreRender="RadGrid1_PreRender"
    Width="100%" 
    CellSpacing="0" 
    CellPadding="0" 
    Skin="Metro" 
    ShowFooter="True">

Why Your Original Approach Didn't Work:

//  Only hides the header cell
if (e.Item is GridHeaderItem)
{
    GridHeaderItem headerItem = e.Item as GridHeaderItem;
    headerItem["Field3"].Visible = false;  // Only hides header cell
    headerItem["Field4"].Visible = false;  // Column structure still exists
}

Best regards,
Support Team

Regards,
Rumen
Progress Telerik

[Andrew]

Again, thanks so much. I used Option 2 and it works great!!

[Andrew]

I've run into another challenge. The first time the grid loads there are values in the hidden columns. I use these to test for formatting. If I change report parameters and Rebind the grid the hidden columns only have '&nbsp;' as values.

Should I be using something other than RadGrad1.Rebind()?

[Andrew]

I think I figured it out. I tried using EnableViewState="false" and it's all working as I would like now.