Trigger 'click' or 'onselectionchanging' on WinJS ListView

Question

I a WinJS page with the following HTML snippet:

<div class="productivity-view">
    <div class="categorylist" aria-label="Category List">
    </div>
    <div class="itemlist" aria-label="Work Item List">
    </div>
</div>

I am able to programmatically initialize two lists:

 var categories = new WinJS.Binding.List(list),
 categoryListEl = document.querySelector(".categorylist"),
 catList = new WinJS.UI.ListView(categoryListEl, {
     itemDataSource: categories.dataSource,
     itemTemplate: document.querySelector('.categoryitemtemplate'),
     onselectionchanging: function(event) {
         var items = event.detail.newSelection.getItems();
         items.done(function(selections) {
             var selection = selections[0],
                 item = selection.data,
                 boxes = categoryListEl.querySelectorAll('.win-itembox');

             boxes[catList.currentItem.index].classList.remove('active');
             boxes[selection.index].classList.add('active');
             workItemHeader.textContent = item.title;
             workList.itemDataSource = new WinJS.Binding.List(item.workitems).dataSource;
         });
     }
 });

 var workItemListEl = document.querySelector(".itemlist"),
 workList = new WinJS.UI.ListView(workItemListEl, {
     itemTemplate: document.querySelector('.workitemtemplate'),
     onselectionchanging: function() {}
 });

The code above listens for the onselectionchanging event on the first list, in which case the event data carries some information used to fill out the second list.

How can I programmatically trigger the onselectionchanging on the first item in the first list?

Answer 1

We figured it out. Solution code below. We wanted to trigger selection of the very first item in the first list, which would then put some information into the second list 'onselectchanging'. This involved listening to the 'onloadingstatechanged' event for the 'complete' state, and then adding the first item in the list to the first list's selection (the missing piece of API knowledge).

var catList = new WinJS.UI.ListView(categoryListEl, {
    ...
    onselectionchanging: function (event) {
        ...
    },
    onloadingstatechanged: function () {
        if (this.winControl.loadingState === "complete") {
            // try to select the first item in the list
            catList.selection.add({ key: 0, index: 0, hasFocus: true, showFocus: false });
        }
    }
});

var workItemListEl = document.querySelector("#itemListControl"),
    workList = new WinJS.UI.ListView(workItemListEl, {
    ...,
    onselectionchanging: function () {
        ....
    }
});