SlickGrid row height based on CSS rule

Question

Currently I am setting the height of the rows in SlickGrid trough options programatically:

var options = {
    rowHeight: 30
};

Is there any way I could do it trough CSS rule without modifying slick-grid default implementation?

I am asking this becaous I wan't to set row height based on CSS Media Queries.

My initial idea was to read CSS property programatically (something like this) and set readen value like that:

var options = {
    rowHeight: readRowHeightCSSValue()
};

...but I am not sure whether this is best idea.

Have you even tried to overwrite the CSS rules and see what's happening? — feeela, Dec 27 '12 at 15:26
I updated the question. @feeela, overwriting CSS rule will not help as SlickGrid needs rowHeight value internally... — PrimosK, Dec 27 '12 at 15:29

idbehold · Answer 1 · 2012-12-28T18:29:20.503

3

Just set the row height based on the width of the window.

rowHeight: $(window).width() < 1024 ? 30 : 15

edited Dec 28 '12 at 18:29

answered Dec 27 '12 at 22:28

idbehold

16,833
5
47
74

Will this be consistent with CSS Media Queries? – PrimosK Dec 28 '12 at 06:39
It would work the same as your solution unless you wished to use the DPI to determine the row height. – idbehold Dec 28 '12 at 18:31

PrimosK · Accepted Answer · 2015-06-16T08:28:15.553

I solved my issue with a little bit different approach as I initially tought, so I am sharing my solution that worked for me.

I used enquire.js with same CSS media queries as in my stylesheets:

enquire.register("only screen and (max-width: 1024px)", {
    match : function() {
        slickGridInitialRowHeight = 15;
    }
}).fire();

enquire.register("only screen and (min-width: 1024px)", {
    match : function() {
        slickGridInitialRowHeight = 30;
    }
}).fire();

... after that, I used slickGridInitialRowHeight to initialize SlickGrid.

SlickGrid row height based on CSS rule

2 Answers2