How do I change listview item size programmatically of winjs listview? - windows-8

Question

I have template binded with the listview in windows store application which I am developing using html5 and javascript. I have a requirement to change the size of the listview item programmatically. Basically I have a input type range on my page. User will change the value of the input and according to that value I should be able to change the size of the listview item programmatically.
Any help or pointer will be much appreciated.
Thanks in advance!

Answer 1

I know this is old, but I have just spent hours doing extensive tests (because I didn't feel like switching to grid mode) and I found a very simple way that would allow you to have items of any height without them overlapping,I though I would share it, all you need to do is add this to your css:
.win-listview .win-listlayout .win-container {
height:auto;
}

Answer 2

You can set the size of the items in a listview using the class set on the item in the template. You can:
Define different classes for the different sizes you want
Define the sizes in CSS. Example:
.small {
height: 150px;
width: 150px;
}
.large {
height: 300px;
width: 300px;
}
Set the appropriate class on the template item:
var templateItem = document.querySelector("#regularListIconTextTemplate .regularListIconTextItem");
WinJS.Utilities.addClass(templateItem, "large");
Refresh the listview:
element.querySelector("#listView").winControl.forceLayout();