Display only 2 rows in a -ms-grid

Question

I am trying to display my listview (which is dynamic) in the form of a grid that has only 2 rows.

I took the default split template and I am trying to modify the view to have 2 rows. By default it has 6 items, so its displaying in 3 rows and 2 columns. However, I want this displayed in 2 rows and 3 columns. Likewise, if I have 10 items, I want 2 rows and 5 columns and so on.

I tried the following, but nothing works:

1. Added a layout attribute in the html for data-win-option  as

layout: {type: WinJS.UI.GridLayout, maxRows:2}

2. While invoking the initialize layout in the js file, for the new ui.GridLayout(), I tried

new ui.GridLayout(2,0)

3. I tried specifying the section to be a -ms-grid with 2 rows as follows:

display:-ms-grid

-ms-grid-rows:1fr 1fr;

None of these work. I have run out of options to get my UI to look the way I want :(

Any help will be appreciated.

Thanks,

Nisha

Answer 1

Hi Nisha,

Do this in items.js:

  // This function updates the ListView with new layouts
        _initializeLayout: function (listView, viewState) {
            /// <param name="listView" value="WinJS.UI.ListView.prototype" />

            if (viewState === appViewState.snapped) {
                listView.layout = new ui.ListLayout();
            } else {
                listView.layout = new ui.GridLayout();
                listView.layout.maxRows = 2;
            }
        },

-Jeff

---

Jeff Sanders (MSFT)

Answer 2

Thanks Jeff,

That works !

I spent hours and did not even think of this :(

Thanks again

-Nisha