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

Show/Hide columns using CSS

4 Answers 781 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Kevin
Top achievements
Rank 1
Kevin asked on 31 Dec 2012, 09:25 PM
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?

4 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 01 Jan 2013, 02:49 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Kevin
Top achievements
Rank 1
answered on 01 Jan 2013, 05:01 PM
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
0
Dimo
Telerik team
answered on 01 Jan 2013, 05:08 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Morten
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 01 Aug 2014, 09:33 PM
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,
...
Tags
Grid
Asked by
Kevin
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Kevin
Top achievements
Rank 1
Morten
Top achievements
Rank 1
Iron
Iron
Veteran
Share this question
or