How to display items of different sizes in WinJs Listview

Goal:

In many situations we need to display the items of different sizes in WinJs listView, but by default, the ListView allocates the same size cell for each  item  it contains. The size of the cell is determined by the size of the first item in the ListView. When the ListView contains items of different sizes, it still allocates the cell size based on the size of the first item. So, if one item is larger than the others, it will be clipped to match the sizes of the other ListView items.

Solution:  

We can modify this behavior and display items that are different sizes by making the items span multiple cells and we need   to  use the Grid layout for the listview.  We  can change this behavior by enabling cell spanning.

Step 1:
Let us start with creating datasource for winjs listview for which  we need to add the  following code. in default.js

var userArray = [   
            { title:"James Brito",picture:"images/JamesBrito.png", type: "largeItem"},                    

   { title: "Alex", picture: "images/alex.png", type:  "smallItem" },      

{ title: "Aleph", picture: "images/Aleph.png", type: "mediumItem" },                       

    { title: "Richard",picture:"images/Richard.png",type: "mediumItem"},       

    { title: "John", picture: "images/john.png", type: "smallItem" },                              

  { title: "David", picture: "images/David.png", type: "smallItem" },                              

  { title: "Morkel", picture: "images/Morkel.png", type: "mediumItem" },                               

 { title: "Sheldon", picture: "images/sheldon.png", type: "largeItem" },                                

{ title: "Joseph", picture: "images/Joseph.png", type: "largeItem" }             ];

Here along with title and picture we have added one more field type for determine the size of each item.we use this field to    assign  a CSS class that determines the size of each item.

  Step 2: To enable cell spaning and to set the size of the base cell we will create a groupInfo function that provides this info and use it to set the GridLayout object’s groupInfo property. then we have to use WinJS.Utilities.markSupportedForProcessing to make our function function accessible in HTML.

var groupInfo = function groupInfo() {
                return
         {
enableCellSpanning: true,
                    cellWidth: 300,
                    cellHeight: 100                 };
            };

 WinJS.Utilities.markSupportedForProcessing(groupInfo);

 Step 3:       Then we need to add the following css classes in default.css for different size items of WinJs

listview .smallItem {
    width: 250px;
    height: 100px;
    padding: 4px;
    overflow: hidden;
    background-color: Green;
    display: -ms-grid;
                   }
      .mediumItem
      {
    width: 250px;
    height: 200px;
    padding: 4px;
    overflow: hidden;
    background-color: Blue;
    display: -ms-grid; }   
    .largeItem {width: 250px;height: 300px; padding: 4px;overflow: hidden; background-color: Brown; display: -ms-grid; }

Step 4: Then we need add the following code in default.html now we will add the type field of the userArray  dataSource as defined in the default.js to the root element of the item in Template.

   
           
          
             
           
       
     then we will set the listview layout to Gridlayout    
      

Step 5:

Finally we will add the groupInfo function in the Winjs Listview layout so we will add it in the default.js

document.getElementById("UserListView").winControl.groupInfo = groupInfo;

In this way we can display items of different size in WinJs listview