locked
how to clear WinJS listview

    Question

  • I am new to WinJS, and want to clear a list view.

    I am having trouble even selecting the list view.

    When attaching events I selected list view like

        var listView = document.getElementById("listView");
        listView.addEventListener("iteminvoked", goToJob);
    

    That worked fine, but when I want to clear listview I was trying to bind an empty list,

        var alistView = document.getElementById("listView");
        alistview.winControl.itemDataSource = list.dataSource;
    I keep getting alistView is undefined
    How to select listview and how to clear list
    Thanks


    Alan Mosley - ThatsIT Solutions

    Friday, April 03, 2015 3:31 AM

Answers

All replies

  • Hi,

    Trying the below code snippet for clearing list:

    var newList = new WinJS.Binding.List([]);
    listview.winControl.itemDataSource = newList;

    For more information please reference the sample.

    --Simon


    True mastery of any skill takes a lifetime.


    • Edited by Simon Li - Friday, April 03, 2015 6:50 AM
    Friday, April 03, 2015 6:41 AM
  • Thanks but my problem is that this line errors
    saying undefined


    Alan Mosley - ThatsIT Solutions

    Friday, April 03, 2015 12:34 PM
  • Thanks but my problem is that this line errors
    saying undefined


    Alan Mosley - ThatsIT Solutions

    Could you show your code? where did this exception occur?

    Best Regards,
    Please remember to mark the replies as answers if they help

    Monday, April 06, 2015 11:23 AM
  • I think I have a deeper problem.
    My problem is that I populate the listview, that works fine, but when I want to repopulate it, it does not update (I do not need to clear if re-populating works.)
    So I guess my question should be, why is my data not repopulating, thanks

      <div class="smallListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
            <div class="smallListIconTextItem">
                <div class="smallListIconTextItem-Detail">
                    <h4 data-win-bind="textContent: Description"></h4>
                    <p>
                        <span data-win-bind="textContent: Name"></span>
                        <span data-win-bind="textContent: State"></span>
                        <span data-win-bind="textContent: Postcode"></span>
                    </p>
                </div>
            </div>
        </div>
        <div id="listView"
             class="win-selectionstylefilled"
             data-win-control="WinJS.UI.ListView"
             data-win-options="{
                itemDataSource: Sample.ListView.data.dataSource,
                itemTemplate: select('.smallListIconTextTemplate'),
                itemsReorderable: true,
             selectionMode:'single',
             layout: { type: WinJS.UI.ListLayout } }">
        </div>
    $(document).ready(function () {
        var listView = document.getElementById("listView");
        listView.addEventListener("iteminvoked", goToJob);
    
        WinJS.UI.processAll();
    
    });
    
    function getJobs(q) {
        var p = new RemoteData().postData(root + "/api/jobs/GetNearActiveJobs", { query: q, kms: $("#near-km").val() });
        p.done(function completed(request) {
            console.log("k" + JSON.stringify(request.response));
            var obj = JSON.parse(request.response);
            console.log(obj);
            WinJS.Namespace.define("Sample.ListView", { data: new WinJS.Binding.List(obj) });
            WinJS.UI.processAll();
        }, function error(request) {
                console.log(request);
            });
    }
    var RemoteData = (function () {
        function RemoteData() {
        }
        RemoteData.prototype.getData = function (url, data) {
        };
        RemoteData.prototype.postData = function (url, data) {
            console.log(url);
            console.log(JSON.stringify(data));
            return WinJS.xhr({
                url: url,
                type: "POST",
                responseType: "",
                data: JSON.stringify(data),
                headers: { "content-type": "application/json" }
            });
        };
        return RemoteData;
    })();


    Alan Mosley - ThatsIT Solutions

    Monday, April 06, 2015 5:51 PM
    • Marked as answer by Alan Mosley Monday, April 13, 2015 3:34 PM
    Monday, April 13, 2015 3:34 PM