-
Bug
-
Resolution: Invalid
-
Normal
-
None
-
6.5.0
-
Chrome, windows 7 64 bit, Jetty
When using a paging grid, the Clients.scrollIntoView() method doesn't seem to work. I need a way to programatically scroll into a specific row within a grid, which is using paging, but so far, I'm unable to do so with Clients.scrollIntoView(). Here's a sample zul file that reproduces this; when commenting out the autopaging="true" and mold="paging", clicking the button bt1 correctly causes the grid to display the component 'myRow', but when auto paging is turned on, nothing happens :
<window hflex="max" vflex="1" >
<div hflex="max" vflex="1" >
<toolbar>
<button id="bt1" label="bt1" onClick="Clients.scrollIntoView(myRow);" />
</toolbar>
<grid id="test" hflex="max" vflex="1" autopaging="true"
mold="paging" pagingPosition="both" sizedByContent="true">
<!--grid id="test" hflex="max" vflex="1" pagingPosition="both" sizedByContent="true" -->
<columns>
<column label="foo"/>
<column label="bar"/>
</columns>
<rows style="overflow:auto">
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row id="myRow"> <label value="MY SCROLLED ROW"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
<row> <label value="val1"/> <label value ="val2"/> </row>
</rows>
</grid>
</div>
</window>