[Solved] MVC Grid: Hidden hides extra column on header

[Daniel Corbett]

I'm getting a weird problem.   I am running the latest release of Telerik MVC (518).   I am trying to run this on IE (symptoms are different on Firefox and chrome).   I am trying to hide a column, but it's also hiding the column header of the next column.

This can be reproduced in Telerik's example code provided with the same release, by adding an additional column and marking it as hidden: 

columns.Bound(o => o.ShipVia).Hidden();

The Hidden column doesn't show, but the heading for "Contact Name" is missing, along within the associated controls.
Here's the code for "AjaxBinding.aspx" with the modification:

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content contentPlaceHolderID="MainContent" runat="server">
<%= Html.Telerik().Grid<Order>()
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(o => o.OrderID).Width(100);
            columns.Bound(o => o.ShipVia).Hidden();
            columns.Bound(o => o.Customer.ContactName).Width(200);
            columns.Bound(o => o.ShipAddress);
            columns.Bound(o => o.OrderDate).Format("{0:MM/dd/yyyy}").Width(120);
        })
        .DataBinding(dataBinding => dataBinding.Ajax().Select("_AjaxBinding", "Grid"))
        .Pageable()
        .Sortable()
        .Scrollable()
        .Groupable()
        .Filterable()
%>
</asp:Content>

On Firefox, ONLY the heading for ShipVia is hidden.  The Contactname header & column are both visible.  

So in both cases, the headers are shifted to the left 1 for the columns.

  - Daniel

[Daniel Corbett]

I discovered a workaround that works for IE, but not Firefox..  and that is to put the hidden column to the right..  :-)

Firefox still looks convoluted.

Another issue, is that if you specify absolute widths for the columns.    They apply accurately for the data, but the headings change according to the width of the browser.

   - Daniel

[Alex Gyoshev]

Hello Daniel,

You should use your IE7 work-around (placing the hidden columns last) and add this code to the CellTag method of GridHtmlBuilder.cs (at the top, just after the creation of the td IHtmlNode).

    if (context.Column.Hidden)
    {
        td.Css("display", "none");
    }

Thank you for pointing that out, your Telerik points have been updated. I've included the fix in our code, so next releases will have it.

All the best,
Alex Gyoshev
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.

[El Roy]

I also encounter such issue, modifying CellTag method alone wont fix the issue. you need also to modify HeadCellTag method

[Korey Renner]

This seems to work for me as a temporary workaround.

Html.Telerik().Grid(Model)

.Name("Grid")

.DataKeys(keys => keys.Add(o => o.ID))

.Columns(columns =>

{

columns.Bound(o => o.Property1);

columns.Bound(o => o.Property2);

columns.Bound(o => o.ID)          // Move hidden columns last to fix IE bug

.Hidden()

.HtmlAttributes(new { style = "display:none" });  // fixes bug in Firefox

})

.Render();

[Derek]

Re: "Another issue, is that if you specify absolute widths for the columns.    They apply accurately for the data, but the headings change according to the width of the browser."

If you're having problems with specifying column width on the grid, particularly if the width of the content exceeds the stated column width, you can try putting the table that the grid is based on into 'fixed' layout mode (default is 'auto') which prevents the cell content from extending the widths of the columns.

You can switch to fixed table rendering mode in your css file as follows:-

#UserDataGrid table
{
    table-layout: fixed;
}

Where #UserDataGrid appears to be the id Telerik assign to the data grid, but check your html source in case your situation is different e.g. multiple grids on the page.

This can be useful particularly when in 'Edit' mode on the grid, where the edit template fields never seem to line up with the headings, now matter how you tweak the column widths.  By setting fixed layout, this usually fixes any column and heading width issues.

Of course the downside is that the cell content is truncated, but shouldn't be too much of a problem for most people.

Might be nice if Telerik included this rendering mode as an option on their fluent grid API perhaps!?

[Korey Renner]

Just wanted to add a "works for me" to Derek's response.  It would be great if Telerik supported this as part of the API as he suggested.

[Patrick Barranis]

I'm running the MVC controls version 2010.3.1318.340 on MVC3, and I'm having the same issues.  I can apply the same workaround and it appears to work, but will these issues be fixed in a future release?

Thanks.

[Atanas Korchev]

Hello Patrick Barranis, 

Could you please be more specific? Which problems are you experiencing? Which workaround seems to fix it (there are quite a few mentioned in the thread). Ideally you could attach a sample project showing your grid configuration.

 In general I can give the following tips for configuring columns:

1. Hidden columns should always come last. This is because of a bug in Internet Explorer.
2. If you are going to use inline editing and your grid is NOT scrollable you should specify the widths of all columns but one. This width-less column would take the remaining space. This is mandatory as the inline form is rendered in another nested TABLE element and the only way to sync its column widths with the parent table is by setting them.
3. When the grid is scrollable table-layout:fixed is automatically applied. Setting column widths is not mandatory then.

Regards,
Atanas Korchev
the Telerik team

[Patrick Barranis]

Atanas,

Sorry... I actually realized afterwards that I was having the same problem mentioned on other threads but I had overlooked it.  I was using ".Hidden()" and not ".Hidden(true)".  I'm not sure why that would do two different things, but it seems that the former version will only hide the column header but not any of the cells in Chrome (and FF).  In IE I believe the ".Hidden()" was causing all the column headers to disappear to something similarly strange.

Either way, using ".Hidden(true)" appears to have done what I needed.  Sorry I jumped the gun on the post!

Thanks!

[Korey Renner]

This is a trick I have used to work around the IE issues.

public static class GridColumnFactoryExtensions
{
    /// <summary>
    /// In Internet Explorer 7, a Telerik grid with all column widths defined may
    /// not have header and body content line up correctly.
    /// </summary>
    /// <typeparam name="T"></typeparam>
    /// <param name="factory"></param>
    /// <returns></returns>
    public static GridTemplateColumnBuilder<T>
        FinalColumnToFixInternetExplorerBug<T>(this GridColumnFactory<T> factory)
        where T : class
    {
        return factory.Template(o => { }).ClientTemplate("&nbsp");
    }
}

Here is an example of using it:
.Columns(columns =>
 {
     columns.Bound(c => c.Name);
     columns.Bound(c => c.Description);
     columns.Bound(c => c.Owner);
     columns.FinalColumnToFixInternetExplorerBug();
}


Notes:
 - you do need to add the namespace of the helper to Web.Config before it will find the method in a view.
 - I haven't tested this on the last few versions of Telerik MVC.  this was mid last year.




 - you should be able to set column widths on all but the "FinalColumn" and IE won't get upset.




 - the text editor here did something horrible to the bullets in this document, but I don't want to retype it.

[Adam]

  I've same problem but on different browser. If I have specify 2 columns with Hidden(true) (added last), during column resize (on Google Chrome) - space for hidden columns is used during columns width automatic generation.
    Please give me some sort of solution.

[Atanas Korchev]

Hello Adam,

 I tried to reproduce the problem in Chrome to no avail. Find attached my test project.

Regards,
Atanas Korchev
the Telerik team

[Tomas]

If the text inside the columns are too long the grid shows badly. Its something i can do to limit the column text size?