ListView inside a Flyout (HTML / JavaScript) RRS feed

  • Question

  • I'd like to include dynamically-generated ListView formatted content in a Flyout I have popping out from a button in the App Bar.

    I'm currently using the same ListView format that other programmers on my team have used successfully elsewhere, but nobody's tried it inside of a Flyout yet. 

    I'm trying to keep as much Flyout management in HTML (vs. JavaScript) as possible.  Any advice would be very much appreciated.  Thank you!

    <div id="refiners_flyout" 
        <div id="refiners_view" aria-label="List of refiners" 
            data-win-options="{selectionMode: 'multi', 
                itemTemplate: select('#refiner_template'), 
                layout: {type: WinJS.UI.GridLayout}}" 
                data-bind="winControl: {
                    itemDataSource: ProductDetailsViewModel.refinerOptions,
                    iteminvoked: RefinerInvokedHandler
    <div id="refiner_template" 
        <div class="refiner_template_style" 
            data-win-bind="textContent: ViewModel.refinerOptions">

    Thursday, July 18, 2013 10:29 PM

All replies

  • you need to use dynamic list template instate of the static one

    try this in you js

     yourListView.winControl.itemTemplate = itemTemplateFunction;
    function itemTemplateFunction(itemPromise) {
            return itemPromise.then(function (item) {
                // Select either normal product template or on sale template
                var itemTemplate = document.getElementById("itemTemplate1");
                if (item.id==2) {
                    itemTemplate = document.getElementById("itemTemplate2");
                // Render selected template to DIV container
                var container = document.createElement("div");
                itemTemplate.winControl.render(item.data, container);
                return container;

    and you can build your item templates in html or using js on the fly

    • Proposed as answer by Ahmed-Fouad Thursday, October 3, 2013 10:20 PM
    Thursday, October 3, 2013 10:19 PM