0

Grid with Sticky Columns

asked 2021-02-08 02:33:35 +0800

andij62 gravatar image andij62
313 1 7

updated 2021-02-08 02:35:25 +0800

Hi All,

is it possible to make the first columns-row sticky so that the columns-headings are always visible? I use zk 9.0.0.1 ce

Regards Andy

delete flag offensive retag edit

5 Answers

Sort by ยป oldest newest most voted
0

answered 2021-02-17 10:29:22 +0800

hawk gravatar image hawk
2785 1 5
http://hawkphoenix.blogsp... ZK Team

I found a CSS solution, please see https://zkfiddle.org/sample/dlh5ii/2-sticky-column-header

link publish delete flag offensive edit

Comments

great that's it! Many Thanks

andij62 ( 2021-02-19 03:31:24 +0800 )edit
0

answered 2021-02-08 08:59:01 +0800

jeanher gravatar image jeanher
1814 2 6
ZK Team

updated 2021-02-08 08:59:27 +0800

Are you referring to the frozen feature like this demo

link publish delete flag offensive edit
0

answered 2021-02-08 15:40:34 +0800

andij62 gravatar image andij62
313 1 7

updated 2021-02-08 23:54:18 +0800

I think i didn't ask the question clearly ...

When I look at this demo page, the blue bar (Year, Season, Month, 1 ...) of the grid at the top of the screen should remain anchored when I scroll up the entire page.

My grid is built into a "long pager" without Grid-Scrollbar. When you scroll down, you can no longer see the header. Therefore this sticky should stay at the top of the screen.

link publish delete flag offensive edit
0

answered 2021-02-09 10:16:53 +0800

hawk gravatar image hawk
2785 1 5
http://hawkphoenix.blogsp... ZK Team

There is no such built-in feature as the sticky-header that floats over a grid when scrolling down.

When there are lots of data in a grid, we suggest using paging mold or set a fixed height or visibleRows to enable a scrollbar.

Is there any reason that you can't use a scrollbar?

You can implement this sticky header by javascript. Since the header is in an independent element: <div id="sWKQ8-head" class="z-grid-header" role="none"> You can listen to onScroll event and make the div sticky by CSS like position: absolute; z-index: 100;

and set left, top, width by javascript.

link publish delete flag offensive edit
0

answered 2021-02-09 15:44:32 +0800

andij62 gravatar image andij62
313 1 7

updated 2021-02-09 15:47:16 +0800

The grid has a maximum of 20 rows and is inserted at the bottom on a page with several elements (Longpager). The entire page already has a scrollbar and I don't want a separate one for the grid. If you scroll on the smartphone, the header would eventually be out of the visible area and that could be solved by keeping the header of the grid at the top.

Could you give me an example of how I would have to implement this in JavaScript?

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2021-02-08 02:33:35 +0800

Seen: 15 times

Last updated: Feb 17

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More