Alternate styling applied to odd rows only

[philshotton]

Hi

I am trying to persuade Slick Grid to display a line or separator between every two rows of information.. Is this possible? At the moment I've tried adjusting the CSS but I only get a line across the bottom of the grid, so I suspect that the lines I'm drawing get hidden by the rows of information.

At the moment I am displaying information in pairs and want to make the pairs grouped together in a more visual way and this seems the most appropriate.

I've attached a screenshot of what I've achieved so far and what I want to achieve (e.g. photoshopped).

CSS changes made were - of course I'd rather slim down the line width, but this was made quite thick for development purposes.

.slick-row.odd {
  background: #fafafa;
  border-bottom-style: solid;
  border-bottom-width: 6px;
}

Apologies if anyone has posted something similar before - I've tried looking but found nothing at the moment. Either I'm close or I'm trying the wrong approach!

This is in a Dynamics CRM (On Premise) environment btw - if that makes any difference.

[6pac]

You may want to use my more up to date repo

Have you checked out this example ?

[philshotton]

hi 6pac, that example looks very interesting indeed!! Cheers for that.

I was wondering if a more recent release would give me more functionality although there's enough development going on in addition to this - but I will check this out and come back if it resolves my issue. Thanks!!

:)

[6pac]

I think each row being a standard height is baked into the grid at a fundamental level. So to do what you want, I think you can use the CSS as you are doing, but you'll have to decrease the height of the 'odd' row to compensate for the added border. If the 'odd' height ends up too small, you might have to increase the row height in general until it works.

[philshotton]

Cheers @6pac I'll see if that works as well.

[philshotton]

Done! I went around the CSS - changing a custom version of the slick grid javascript code.

I did find this as well, which helped me get to the final solution : http://stackoverflow.com/questions/21557847/slickgrid-cell-borders-are-clipped-after-setting-box-sizing-to-use-content-box

:)

Happy with that.

[philshotton]

` function appendRowHtml(stringArray, row, range) {

...

        if(row % 2 == 0)
        {
            stringArray.push("<div class='ui-widget-content " + rowCss + "' style='top:" + (((options.rowHeight * row) +2) - offset) + "px'>");
        }
        else
        {
            stringArray.push("<div class='ui-widget-content " + rowCss + "' style='top:" + (options.rowHeight * row - offset) + "px'>");
        }

`

[philshotton]

Code snippet added above

[6pac]

Good to see you solved it. I'd just add that the content-box issue has been fixed in my repo. https://github.com/6pac/SlickGrid/commit/f1eda9ada09638cadf828bee827b005edc7eceb8