lazy replication with wrapping layout

[Peter_Chea]

Hi Antun, I not sure how to use lazy replication with wrappinglayout. My code generate 3 boxes per row with the wrappinglayout. However after I put in lazy replication, it generate one boxe per row. Here is the code.



<canvas width="780" height="540" bgcolor="#EAEAEA">
<dataset name="products">
<item id="1" name=""></item>
<item id="2" name=""></item>
<item id="3" name=""></item>
<item id="4" name=""></item>
<item id="5" name=""></item>
<item id="6" name=""></item>
<item id="7" name=""></item>
<item id="8" name=""></item>
<item id="9" name=""></item>
<item id="10" name=""></item>
<item id="11" name=""></item>
<item id="12" name=""></item>
<item id="13" name=""></item>
<item id="14" name=""></item>
<item id="15" name=""></item>
<item id="16" name=""></item>
<item id="17" name=""></item>
</dataset>


<view width="400" height="400" clip="true" bgcolor="#bbbbbb">
<view width="100%">
<wrappinglayout axis="x" spacing="20"/>
<view bgcolor="blue" width="100" height="100">
<datapath xpath="products:/item" replication="lazy"/>
<view width="90%" height="90%" align="center" valign="middle" bgcolor="red"/>
</view>
</view>
<scrollbar/>
</view>

</canvas>

[adam]

Sorry, but unfortunately, lazy replication currently implies a simple list -- basically lazy replication has a simplelayout built in.

If you have a fixed row size (3 in this example,) you could structure your data like this:
<row>
<item
<item
<item
</row>
<row>
<item
<item
<item
</row>


and then have thr row replicate.

[Peter_Chea]

Adam, thanks for the alternative.
Do you know if it is possible for me to extend/override some of the LzLazyReplicationManager methods to use different layouts?

[Peter_Chea]

Hi, I am trying to convert the dataset items in 3 columns rows, but the order of the rows seem to be incorrectly displayed. Any idea what is wrong?

<canvas width="780" height="540" bgcolor="#EAEAEA">

<dataset name="products">
<item id="1"></item>
<item id="2"></item>
<item id="3"></item>
<item id="4"></item>
<item id="5"></item>
<item id="6"></item>
<item id="7"></item>
<item id="8"></item>
<item id="9"></item>
<item id="10"></item>
<item id="11"></item>
<item id="12"></item>
<item id="13"></item>
<item id="14"></item>
<item id="15"></item>
<item id="16"></item>
<item id="17"></item>
</dataset>



<dataset name="productsRows">

</dataset>


<simplelayout axis="y"/>
<button>
display
<method event="onclick">
ToRows(canvas.datasets.products, canvas.datasets.productsRows, 3);
//repl.datapath.runXPath();
debug.write( canvas.datasets.productsRows.serialize());
</method>
<method name="ToRows" args="src, dst, numCol">
<![CDATA[
if(numCol == null)
{
numCol = 3;
}
var dstRow;
var row = 0;
for(var i = 0; i < src.childNodes.length; i++)
{
var srcNode = src.childNodes[i];
if((i % numCol) == 0)
{
dstRow = new LzDataElement("row");
dstRow.setAttr("id", ++row);
dst.appendChild(dstRow);
}
dstRow.appendChild(srcNode);
//debug.write(srcNode);
}
]]>
</method>
</button>




<view width="400" height="400" clip="true" bgcolor="#bbbbbb">
<view>

<simplelayout axis="y"/>
<view id="repl">
<datapath xpath="productsRows:/row"/>
<simplelayout axis="x" spacing="20"/>
<view bgcolor="blue" width="100" height="100">
<datapath xpath="item"/>
<view width="90%" height="90%" align="center" valign="middle" bgcolor="red">
<text datapath="@id"/>
</view>
</view>
</view>
</view>
<scrollbar/>
</view>

</canvas