Sticky bar

Mika_Kosunen

Hi Cireson Community,

I have a minor user experience problem. Can someone provide me a way to do sticky bar.
I have highlighted with blue pen the navigation I would want to follow as I scroll down.
See attachment.

edit. I have tried every css trick I found through Google, so if you can provide me a working solution 
with source code I would appreciate that. Thank you very much,

- Much need in help

Mika_Kosunen

Isn't there any solutions for this?

Tom_Hendricks

I attempted this the other day by changing the CSS on the page--without any success at all--but I think this might be more promising: https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/fixed-headers-grid

I won't have time to try it right away, but perhaps it will either work or set you on the right path.  I will probably give this at try soon, but it will take me some time to get to it.

Mika_Kosunen

No solution?

Konstantin_Slavin-Bo

A (very) quick PoC using the code from @Tom_Hendricks' link:

var wrapper = $('.append-here'),<br>&nbsp;&nbsp;&nbsp; header = wrapper.find(".k-grid-header");<br><br>function resizeFixed() {<br>&nbsp; var paddingRight = parseInt(header.css("padding-right"));<br>&nbsp; header.css("width", wrapper.width() - paddingRight);<br>}<br><br>function scrollFixed() {<br>&nbsp; var offset = $(this).scrollTop(),<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; tableOffsetTop = wrapper.offset().top,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; tableOffsetBottom = tableOffsetTop + wrapper.height() - header.height();<br>&nbsp; if(offset < tableOffsetTop || offset > tableOffsetBottom) {<br>&nbsp;&nbsp;&nbsp; header.attr('style', 'top: ; position: ');<br>&nbsp; } else if(offset >= tableOffsetTop && offset <= tableOffsetBottom && !header.hasClass("fixed")) {<br>&nbsp;&nbsp;&nbsp; header.attr('style', 'top: 50px; position: fixed;');<br>&nbsp; }<br>}<br><br>resizeFixed();<br>$(window).resize(resizeFixed);<br>$(window).scroll(scrollFixed);

Open a view with a grid, run the code in DevTools, and scroll away!

Now we just need to find a suitable event (alternatively using a mutation observer) to bind it to. The link suggests there's a dataBound event, which seems to be in the viewModel (viewModel.onDataBound perhaps?) in our case.

Mika_Kosunen

Hi Konstantin, this is very nice! But all the th-elements are at reduced sizes...
and how to implement that to the portal?

Tom_Hendricks

I have another way of doing this with (mostly) CSS, but involves changing quite a few classes, and it puts the columns out of alignment just like the image above.  The gist is that I make page fixed (position:fixed;) and set the table to overflow-y: scroll;.  This makes the header the wrong size and column resizing has no effect.  There is more to it than this, but I only have time for a quick response at the moment.

Mika_Kosunen

Thank you guys for contributing your thoughts and support I have been struggling with this sticky-bar-thing, with css and js. Unfortunately no result