WinJSContrib.Grid (NuGet package)

This control is intended to help layout elements in a grid manner. It could be a replacement for WinJS.UI.ListView if you don't need a virtualized datasource.

To use this control, reference the WinjsContrib.Core and the grid's javascript file in your page or in default.html:
<script src="/scripts/winjscontrib/mcnext.ui.multipass-renderer.js"></script>
<script src="/scripts/winjscontrib/mcnext.ui.grid.js"></script>

You could declare a grid like any WinJS Control:
<div id="mygrid" data-win-control="MCNEXT.UI.GridControl"></div>

Calling the "layout" function on the grid will layout elements contained within the grid node. If you use WinJSContrib navigator, the grid will layout itself within the page's layout event.

The grid control has different layout algorythms, and several options. It uses multipass rendering to provide a very fast time to screen.

<div data-win-control="MCNEXT.UI.GridControl" data-win-options="{
        itemClassName: 'article',
        itemTemplate: '/templates/article.html',
        layouts:  {
            horizontal: { query: '(orientation: landscape)', layout: 'flexhorizontal', cellSpace: 5, cellWidth: 300, cellHeight: 250 },
            vertical: { query: '(orientation: portrait)', layout: 'flexvertical', cellWidth: 300, cellHeight: 250 },
            snapped: { query: '(orientation: portrait) and (max-width: 340px)', layout: 'flexvertical', cellWidth: 300, cellHeight: 250 }
        itemInvoked: 'page:itemClick'

Layout can be :
"horizontal" or "vertical", in this case the layout is done using a matrix positionning algorythm. With this layout, you could have row-spanning or column-spanning items, and the layout will automatically fill holes if possible.
"flexhorizontal" or "flexvertical" relies on css flexbox. This kind of layout is a lot faster but all items must have the same size.

If you define a template, you coud call prepareItems to render items.

Last edited Mar 18, 2014 at 8:11 AM by gleborgne, version 2