locked
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

    Wednesday, September 5, 2012 7:19 AM

Answers

  • 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)

    Wednesday, September 5, 2012 4:00 PM
    Moderator

All replies

  • 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)

    Wednesday, September 5, 2012 4:00 PM
    Moderator
  • Thanks Jeff,

    That works !

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

    Thanks again

    -Nisha

    Thursday, September 6, 2012 9:44 PM