Help Regarding Designing the template to display data

Question

Hi,

I have a requirement like image shown below. the listing is to show the favorites of the person.

The blue tiles need to be filled up with content. The gray tiles are static tiles.

Few things which should be considered are

1. There should be max of 6 tiles as shown there(Dataset might return huge of  data).

2. How should I hide the blue tiles if there is no data.(Let us say there are only 3 in result set. so that big tile and small two tiles below it will be remained and remaining will be hidden so that the gray tiles move to left).

Please help me out in choosing the correct way to implement.

I have tried using -ms-grid attributes. But the problem will be in hiding. Even though I hide the blue tile the space will remain as is.(i.e the tiles in gray wont move to left).

Could some one please help me to make my design flexible.

---

Thanks & Regards Tejaswi Chandrapatla

Answer 1

Use a CSS grid, and when you want to hide the second column just reset its -ms-columns style to have 0px for the middle column. That will effectively hide it. That is, if your columns are originally, say, 400px 200px 100px, set it to 400px 0px 100px.

You can do this from JS through the element's style.msGrid.msColumns property, or set up two style rules in CSS, one for each columns configuration, and just change the class that you're applying to the element. The WinJS.Utilities.addClass and removeClass methods are helpful here.

Kraig

Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript, a free ebook from Microsoft Press

Also see second edition preview

Answer 2

Had the same idea. But just trying to find out if there is any other approach.

---

Thanks & Regards Tejaswi Chandrapatla