locked
ListView with diffent item templates

    Question

  • I’m trying to have a ListView with a ListLayout whose items have different height to simulate vertical grouping but it looks like that items can’t have different height (always gets the 1<sup>st</sup> item’s height)

    Am I missing something or is it “by default”?

    Cheers,

    Corrado


    Corrado Cavalli [Microsoft .NET MVP-MCP]
    UGIdotNET - http://www.ugidotnet.org
    Weblog: http://blogs.ugidotnet.org/corrado/
    Twitter: http://twitter.com/corcav

    Monday, May 28, 2012 3:49 PM

Answers

  • One idea, is that you can skip the ListLayout, and just have a scrollable div. Then you can render templates and append them to your div.

    So if you have, let's say 3 templates (small, medium, large), in your code you can have this:
    var small = new WinJS.Binding.Template(document.getElementById("SmallTemplate"));
    var medium = new WinJS.Binding.Template(document.getElementById("MediumTemplate"));
    var large = new WinJS.Binding.Template(document.getElementById("LargeTemplate"));

    ...then you can loop through your items, and use the right template and append to the scrollable div....here's quick and ugly example:

    medium.render({
      Title: _title
    }).then(function (element) {
        var title = element.getElementsByClassName("title-span");
        title.innerHTML = _title;
      }

      yourScrollDiv.appendChild(element);
    });

    Monday, May 28, 2012 5:53 PM
  • The HTML ListView item templating sample  shows having different height and size items (see scenario 4).

    -Jeff


    Jeff Sanders (MSFT)

    Tuesday, May 29, 2012 7:35 PM
    Moderator

All replies

  • Problem I had with using CSS to change the size of templates in a particular view(snap ion my case), was that the win-surface didn't take my CSS into it's size calculations, just the template size on render.

    Do you have a wireframe of the look you're trying to achieve?
    Monday, May 28, 2012 5:45 PM
  • One idea, is that you can skip the ListLayout, and just have a scrollable div. Then you can render templates and append them to your div.

    So if you have, let's say 3 templates (small, medium, large), in your code you can have this:
    var small = new WinJS.Binding.Template(document.getElementById("SmallTemplate"));
    var medium = new WinJS.Binding.Template(document.getElementById("MediumTemplate"));
    var large = new WinJS.Binding.Template(document.getElementById("LargeTemplate"));

    ...then you can loop through your items, and use the right template and append to the scrollable div....here's quick and ugly example:

    medium.render({
      Title: _title
    }).then(function (element) {
        var title = element.getElementsByClassName("title-span");
        title.innerHTML = _title;
      }

      yourScrollDiv.appendChild(element);
    });

    Monday, May 28, 2012 5:53 PM
  • The HTML ListView item templating sample  shows having different height and size items (see scenario 4).

    -Jeff


    Jeff Sanders (MSFT)

    Tuesday, May 29, 2012 7:35 PM
    Moderator