Show/Hide columns using CSS

[Kevin]

I am working on a site that requires responsive design, such that when the site is being accessed from a small mobile device, I can hide some of the columns due to the smaller real estate available.

The typical method to doing this is using media queries in CSS.  As such, I have applied some classes to the columns in my MVC view like so:

columns.Bound("memberName").Title("columnTitle").HtmlAttributes(new {@class = "col-desktop"})

I can see in the resulting HTML page that the class is applied to the td tag, and not the col tag in the table.  As such, when I set the visibility of the class to collapse the row header is still there.  If I apply the class to the row header as well, then the column is not visible although the grid still seems like it leaves a space where the column would be.

What would be the best way to accomplish this?

[Dimo]

Hello Kevin,

It is difficult to achieve the desired behavior with CSS only, due to the different way browsers hide table columns. I will tell you the prerequisites for hiding a column properly and you will need to think of the most convenient way to accomplish this in your particular scenario:

1. The <col> element should be removed from the DOM
2. All cells from the respective column should have a display:none style applied.

I think that a lot easier option is to create the Grid widget with different configuration and skip the column completely, rather than fiddle with DOM elements afterwards. This will also reduce the Grid's HTML markup and improve performance.

Alternatively, use the hideColumn method, which does points (1) and (2) internally.

Regards,
Dimo
the Telerik team

[Kevin]

Dimo,

thanks for the answer, it is clear.

I don't know of any way to remove the <col> tag by only using CSS, however by setting display to none on the column cells and header cell it seems to have done the trick.  By not removing the <col> element, am I signing up for problems of some sort?

Thanks,
KB

[Dimo]

Hi Kevin,

Removing the <col> element from the DOM is required by some IE versions (7 and 8 if I remember correctly), which will otherwise leave empty space where the column should be. It may not be required in your case if you are hiding the columns on mobile devices using other browsers.

Surely, removing an element from the DOM requires Javascript.

I still advise you to use the hideColumn() method instead of manual manipulations or even better, skip the column during Grid initialization.

Regards,
Dimo
the Telerik team

[Morten]

I had a similar requirement and I went with setting up grid columns depending on screen width.

Something like:
var gridColumns = [ {field: "name", title: "Name"}, {field: "adr1", title: "Address"}, {field: "adr2", title: "Address 2"} ];
if (screensize < x) {
 remove column with field adr2 (using underscore.js)
}
$("#grid").kendoGrid({
dataSource: gridDs,
columns: gridColumns,
...