0

Grid with first column frozen

asked 2022-01-04 18:26:54 +0800

manuela0000 gravatar image manuela0000
3 1

updated 2022-01-04 18:32:57 +0800

Hello! I have a grid with 7 columns and some rows. Every column has a fixed width (300px), so there is an horizontal scroll. I need to lock first column so that this column is excluded from scroll. In other words, I would like to start scroll from second column.

I know there is "frozen" functionality to do that but it doesn't work.

Can you help me? Thanks in advance.

This is my code:

<grid id="listGiorno" mold="default" vflex="1" width="3000px">
                    <frozen columns="1"></frozen>
                    <columns id="columnsGiorno">
                        <column label="Operatore 1" width="300px" sort="none" align="center" />
                        <column label="Operatore 2" width="300px" sort="none" align="center"/>
                        <column label="Operatore 3" width="300px" sort="none" align="center"/>
                        <column label="Operatore 4" width="300px" sort="none" align="center"/>
                        <column label="Operatore 5" width="300px" sort="none" align="center"/>
                        <column label="Operatore 6" width="300px" sort="none" align="center"/>
                        <column label="Operatore 7" width="300px" sort="none" align="center"/>
                    </columns>
                    <rows>
                        <row>
                            <cell><label value="Item 1.1"/></cell>
                            <cell><label value="Item 1.2"/></cell>
                            <cell><label value="Item 1.3"/></cell>
                            <cell><label value="Item 1.4"/></cell>
                            <cell><label value="Item 1.5"/></cell>
                            <cell><label value="Item 1.6"/></cell>
                            <cell><label value="Item 1.7"/></cell>
                        </row>
                        <row>
                            <cell><label value="Item 1.1"/></cell>
                            <cell><label value="Item 1.2"/></cell>
                            <cell><label value="Item 1.3"/></cell>
                            <cell><label value="Item 1.4"/></cell>
                            <cell><label value="Item 1.5"/></cell>
                            <cell><label value="Item 1.6"/></cell>
                            <cell><label value="Item 1.7"/></cell>
                        </row>
                        <row>
                            <cell><label value="Item 2.1"/></cell>
                            <cell><label value="Item 2.2"/></cell>
                            <cell><label value="Item 2.3"/></cell>
                            <cell><label value="Item 2.4"/></cell>
                            <cell><label value="Item 2.5"/></cell>
                            <cell><label value="Item 2.6"/></cell>
                            <cell><label value="Item 2.7"/></cell>
                        </row>
                    </rows>
                </grid>
delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted
0

answered 2022-01-05 15:11:34 +0800

MDuchemin gravatar image MDuchemin
2061 1 5
ZK Team

Hi there,

The frozen feature doesn't work in this case because your grid is already wide enough to display every columns without scrolling.

Instead, the grid is very large, so you are scrolling the whole page.

If you want to use the frozen feature, you will need to have a scrollbar at grid level, by changing how you assign width to it. You can assign a smaller width (fixed size), or use a percent based width to size based on parent, or using hflex to size based on available space in parent.

See sample here: https://zkfiddle.org/sample/lg4d2i/12-grid-frozen

In this sample, if you use the scrollbar at the bottom, you are scrolling the entire container (in this case the vlayout), not just the grid. however, the first grids scrolls its content, and therefore can use the frozen feature.

link publish delete flag offensive edit

Comments

Got it, it works now. thanks a lot man! you saved me! :)

manuela0000 ( 2022-01-05 18:54:05 +0800 )edit

Happy to heard it worked for you ;)

MDuchemin ( 2022-01-05 21:05:07 +0800 )edit

Please remember to also mark the StackOverflow question as resolved, if you want other people to see this reply :)

MDuchemin ( 2022-01-05 21:05:32 +0800 )edit

Done! thanks again! :)

manuela0000 ( 2022-01-05 22:26:19 +0800 )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
1 follower

RSS

Stats

Asked: 2022-01-04 18:26:54 +0800

Seen: 5 times

Last updated: Jan 05

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