locked
Why my templating function is not rendering the template in grid app template project? RRS feed

  • Question

  • I'm following http://msdn.microsoft.com/en-us/library/windows/apps/jj585523.aspx  How to create a templating  function for listview along with listview templating function SDK example.

      My html and js is as follows:

    <section aria-label="Main content" role="main">
                
                <div id="listview" class="groupeditemslist win-selectionstylefilled"
                data-win-control ="WinJS.UI.ListView"
                data-win-options="{ itemDataSource : Data.items.dataSource,
                                    groupDataSource : Data.groups.dataSource,
                                    itemTemplate: MyJSItemTemplate,
                                    selectionMode: 'none',
                                    layout: {type: WinJS.UI.GridLayout}
                                  }"></div>
            </section>

    JS PART:
    var MyJSItemTemplate = WinJS.Utilities.markSupportedForProcessing(function MyJSItemTemplate(itemPromise) {
          //function MyJSItemTemplate(itemPromise) {
            return itemPromise.then(function (currentItem) {
                // Build ListView Item Container div and details
                            return result;
            });
            //}
        });
    ui.Pages.define("/pages/groupedItems/groupedItems.html", {
            
                    ready: function (element, options) {
                var lv = document.getElementById("listview");
                //console.log(lv.winControl);
                //lv.itemTemplate = MyJSItemTemplate;
                lv.winControl.forceLayout();

    ALL I see is following snap-shot:
    Saturday, May 11, 2013 12:14 AM

Answers

  •  Try this I have added the template generating function in a different namespace. This works fine for me.

      var itemTemplate = WinJS.Utilities.markSupportedForProcessing(function MyCellSpanningJSTemplate(itemPromise) {
            return itemPromise.then(function (currentItem) {
                var result = document.createElement("div");
    
                // Use source data to decide what size to make the
                // ListView item
                result.className = currentItem.data.className;
                result.style.overflow = "hidden";
    
                // Display image
                var image = document.createElement("img");
                image.className = "regularListIconTextItem-Image";
                image.src = currentItem.data.thumbnail;
                result.appendChild(image);
    
                var body = document.createElement("div");
                body.className = "regularListIconTextItem-Detail";
                body.style.overflow = "hidden";
                result.appendChild(body);
    
                // Display title
                var title = document.createElement("h4");
                title.innerText = currentItem.data.title;
                body.appendChild(title);
    
                // Display text
                var fulltext = document.createElement("h6");
                fulltext.innerText = currentItem.data.description;
                body.appendChild(fulltext);
    
                return result;
            });
        });
    
    
      WinJS.Namespace.define("DataSturcture",
           { groupInfo: groupInfo, dataList: articlesList, template: itemTemplate });
    
    -----------
    
    //In Ready function of the page
    
                WinJS.UI.processAll().then(function () {
                    var listview = document.getElementById("listView").winControl;
    
                    listview.itemDataSource = DataSturcture.dataList.dataSource;
                    listview.itemTemplate = DataSturcture.template;
    
                    listview.layout = new WinJS.UI.GridLayout({
                        groupInfo:DataSturcture.groupInfo
                    });
    
                });
    
    

    • Marked as answer by Song Tian Friday, May 17, 2013 6:16 AM
    Sunday, May 12, 2013 3:41 PM