How to remove the header in SlickGrid?

Question

I know that there is no API to remove the header row, but I'm sure it can be done by modifying some CSS. Any ideas ?

For example, here: http://mleibman.github.com/SlickGrid/examples/example4-model.html

CSS experts ! I need your help with this one. I'm interested in changing the CSS code of the package that removes the header row. CSS code that can be loaded on top of the package is preferred. The source code is here: http://github.com/mleibman/SlickGrid (Press "Download Source")

score 6 · Accepted Answer · edited Apr 15 '13 at 13:53

6

The short answer is that doing this is not supported in SlickGrid, at least at the moment. The CSS workaround doesn't work because SlickGrid uses the DOM elements in the header to calculate the dimensions of the viewport. Setting it to display:none makes SlickGrid think that the grid is 0 pixels wide.

You can sort of get around it by doing $(".slick-header-columns").css("height","0px") followed by a call to grid.resizeCanvas() to get rid of the remaining whitespace at the bottom of the grid.

edited Apr 15 '13 at 13:53

Blowsie

40,239
15
88
108

answered Apr 30 '10 at 05:24

Tin

9,082
2
34
32

Thanks ! The workaround works :) It would be nice to have this basic(?) feature in the future. Thank you for your time ! – Misha Moroshko Apr 30 '10 at 07:12
@moroshko: You can always add it to Issues on GitHub as a feature request ;) – Tin Apr 30 '10 at 16:45
4

You can, at least with 2.0, set css styles and the grid will handle it without explicitly needing to do it via javascript and calling grid.resizeCanvas() as it is calculated correctly on the first render. .slick-header-columns{ height: 0px; } .slick-header.ui-state-default{ border: none; } – Chris Janssen Apr 26 '12 at 00:22

score 4 · Answer 2 · answered Apr 26 '12 at 18:17

4

Just add the following to the grid options:

headerHeight: 0

and then in your css put something like:

#myGridID .slick-header-columns {
  display: none;
}

answered Apr 26 '12 at 18:17

eugenevb

41
1

score 2 · Answer 3 · edited Apr 23 '15 at 15:16

2

I had the same problem and simply not displaying does work:

$(element).find('.slick-header').css('display', 'none');

edited Apr 23 '15 at 15:16

xlecoustillier

16,183
14
60
85

answered Apr 23 '15 at 15:16

dec

594
1
9
18

1

This is a great answer, as it doesn't modify all the SlickGrid elements, but instead only the ones found in a container! – El Developer Apr 19 '16 at 04:01

score 1 · Answer 4 · answered Dec 20 '12 at 21:23

1

Another way to do this is to add one line to the slick.grid.js

function createColumnHeaders() { return; }

if you add a return to the first line inside of createColumnHeaders it seems to remove the headers.

answered Dec 20 '12 at 21:23

Sean Keisman

11
1

score 1 · Answer 5 · answered Apr 28 '10 at 09:40

1

This should probably work:

.slick-header-columns { display: none; }

answered Apr 28 '10 at 09:40

Deniz Dogan

25,711
35
110
162

I tried this. It doesn't work. The rest of the cells disappear as well. – Misha Moroshko Apr 28 '10 at 09:51
@Misha Moroshko: When I tried it using Firebug on the example page it worked just fine. I can't see anything in the HTML that would make the other cells disappear. – Deniz Dogan Apr 28 '10 at 10:57
Could you please tell me where did you add this code using Firebug ? – Misha Moroshko Apr 28 '10 at 13:15
I selected the `div` with class `slick-header-columns` and chose "Add property" to the class CSS rule. – Deniz Dogan Apr 28 '10 at 23:00
It's strange. It really works with Firebug, but if I download the SlickGrid package and change this example as you proposed it does not work.... – Misha Moroshko Apr 28 '10 at 23:59

score 0 · Answer 6 · answered Jun 16 '20 at 08:37

0

Maybe late, but works for me

$('#myGrid').find('.slick-header-column.ui-state-default').css('display', 'none');

answered Jun 16 '20 at 08:37

Altiy Zemlytskiy

51
8

How to remove the header in SlickGrid?

6 Answers6