itemtemplate not working for the list view control RRS feed

  • Question

  • Am working on a windows store javascript application. The application will be using data from azure. When I tried to port the azure connectivity sample to a navigation template, the list view displayed the entire columns from the table.I copied the code logic from the azure mobile services project sample to the navigation page control. The html and css file were kept identical to the actual project sample. The javascript code is as follows

    // http://go.microsoft.com/fwlink/?LinkId=232511
    (function () {
        "use strict";

        WinJS.UI.Pages.define("/pages/Advertisement/advertisement.html", {
            // This function is called whenever a user navigates to this page. It
            // populates the page elements with the app's data.
            ready: function (element, options) {
                // TODO: Initialize the page here.

                buttonRefresh.addEventListener("click", function () {
                buttonSave.addEventListener("click", function () {
                        text: textInput.value,
                        complete: false


            unload: function () {
                // TODO: Respond to navigations away from this page.

            updateLayout: function (element, viewState, lastViewState) {
                /// <param name="element" domElement="true" />

                // TODO: Respond to changes in viewState.

    var client = new Microsoft.WindowsAzure.MobileServices.MobileServiceClient(

    var todoTable = client.getTable('TodoItem');
    var todoItems = new WinJS.Binding.List();
    var refreshTodoItems = function () {
        // This code refreshes the entries in the list view be querying the TodoItems table.
        // The query excludes completed TodoItems                
        todoTable.where({ complete: false })
            .done(function (results) {
                todoItems = new WinJS.Binding.List(results);
                listItems.winControl.itemDataSource = todoItems.dataSource;
    var insertTodoItem = function (todoItem) {
        // This code inserts a new TodoItem into the database. When the operation completes
        // and Mobile Services has assigned an id, the item is added to the Binding List
        todoTable.insert(todoItem).done(function (item) {
    var updateCheckedTodoItem = function (todoItem) {
        // This code takes a freshly completed TodoItem and updates the database. When the MobileService 
        // responds, the item is removed from the list 
        todoTable.update(todoItem).done(function (item) {
            todoItems.splice(todoItems.indexOf(item), 1);

    Screen shot of the actual application sample output

    Screenshot of my application output after copying the code logic to the page control

    My issue is that when am running the application the itemtemplate is not getting set for the list view. I have also made a detailed query at this link

    Thursday, March 28, 2013 5:30 PM

All replies

  • Hi,

    Can you post your HTML also. I see that you have not binding available for the Binding List ? What I mean is the Binding list should be set as a datasoure to some list view or something else.

    Please post your HTML.

    - Girija

    Thursday, March 28, 2013 7:21 PM
  • @Girija. The html code is as follows. It is identical to the original sample. I havent made any changes to it.

    <!DOCTYPE html>
        <meta charset="utf-8" />

        <!-- WinJS references -->    
        <link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
        <script type="text/javascript" src="/MobileServicesJavaScriptClient/MobileServices.js"></script>

        <!-- QuickStart references -->
        <link href="/css/default.css" rel="stylesheet" />
        <script src="/js/default.js"></script>
        <script src="/pages/Advertisement/advertisement.js"></script>
        <link href="/pages/Advertisement/advertisement.css" rel="stylesheet" />
        <div style="margin: 50px 10px 10px 50px" id="overalldiv">
            <div style="display: -ms-grid; -ms-grid-columns: 1fr 1fr; -ms-grid-rows: auto 1fr;">

                <div style="-ms-grid-column-span: 2; margin: 0px 0px 20px 0px;">
                    <div style="color: #0094ff; font-size: 8pt">WINDOWS AZURE MOBILE SERVICES</div>
                    <div style="color: #808080; font-size: 32pt">Sample</div>

                <div style="-ms-grid-row: 2; -ms-grid-column: 1;">
                    <div style="display: -ms-grid; -ms-grid-columns: auto 1fr">
                        <div style="-ms-grid-column: 1;" class="tasknumber">
                        <div style="-ms-grid-column: 2">
                            <strong>Insert a TodoItem</strong><br />
                            <span style="font-size: small">Enter some text below and click Save to insert a new todo item into your database</span>
                    <div style="margin: 5px 0px 0px 72px; -ms-grid-column: 2">
                        <input type="text" id="textInput" />
                        <button id="buttonSave" style="margin-left: 5px">Save</button>

                <div style="-ms-grid-column: 2; -ms-grid-row: 2;">
                    <div style="display: -ms-grid; -ms-grid-rows: auto 1fr">
                        <div style="-ms-grid-row: 1">
                            <div style="display: -ms-grid; -ms-grid-columns: auto 1fr">
                                <div style="-ms-grid-column: 1; float: left;" class="tasknumber">
                                <div style="-ms-grid-column: 2">
                                    <strong>Query and Update Data</strong><br />
                                    <span style="font-size: small">Click refresh below to load the unfinished TodoItems from your database. Use the checkbox to complete and update your TodoItems</span>
                            <div style="margin: 5px 0px 0px 72px">
                                <button id="buttonRefresh">Refresh</button>

                    <div id="TemplateItem" data-win-control="WinJS.Binding.Template">
                        <div style="display: -ms-grid; -ms-grid-columns: auto 1fr">
                            <input class="itemCheckbox" type="checkbox" data-win-bind="checked: complete; dataContext: this" />
                            <div style="-ms-grid-column: 2; -ms-grid-row-align: center; margin-left: 5px" data-win-bind="innerText: text">

                    <div id="listItems" style="-ms-grid-row: 2; margin: 20px 0px 0px 0px; -ms-grid-row-align: stretch"
                        data-win-options="{ itemTemplate: TemplateItem, layout: {type: WinJS.UI.ListLayout} }">

    Friday, March 29, 2013 1:25 AM