Tags
People
Badges
Help
Got it, it works now. thanks a lot man! you saved me! :)
manuela0000 ( 2022-01-05 18:54:05 +0800 )edit-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
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>
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.
Got it, it works now. thanks a lot man! you saved me! :)
manuela0000 ( 2022-01-05 18:54:05 +0800 )editAsked: 2022-01-04 18:26:54 +0800
Seen: 10 times
Last updated: Jan 05 '22