locked
List items selected item and calling programmatically click functions

    Question

  • Good Afternoon All,

    I am trying to write a page that contains a list view with bind elements. When the page loads, it needs to default to a selected item with styling and call the click method associated with that item. The click method opens up a SettingsFlyout that will contain more information on that item.

    I am unsure of how to set a selected style and call the click method programmatically.

    Here is my code for binding the items:

                    <div id="clientSatSummaryViewTemplate" data-win-control="WinJS.Binding.Template">
                        <div data-win-bind="onclick:clientSatDetail">
                            <span data-win-bind="innerText:Rating" id="rating"></span> 
                            <span data-win-bind="innerText:ClientName" id="clientName"></span>
                         </div> 
                    </div>

        function loadClientSatView(clientSatResults) {
            var clientSatEntries = JSON.parse(clientSatResults.response);
            var clientSatEntriesBind = new WinJS.Binding.List();
            var clientListView = document.getElementById("clientSatView").winControl;
            var clientSatTemplate = document.getElementById("clientSatSummaryViewTemplate");
    
            clientListView.itemDataSource = clientSatEntriesBind.dataSource;
            clientListView.itemTemplate = clientSatTemplate;
    
            clientSatEntries.forEach(function (i) {
                var item =
                {
                    Rating: i.Rating,
                    ClientName: i.ClientName,
                    clientSatDetail: function (args) {
                        WinJS.UI.SettingsFlyout.showSettings('clientDiv', '/pages/settings/settings.html');
                    }
                };
                item.clientSatDetail.supportedForProcessing = true;
                clientSatEntriesBind.push(item);
            });
            
            
    
        }
    

    Friday, August 02, 2013 8:08 PM

Answers

  • HI,

    From your decription,I think you can set the div container class name. And then we can use the class name to set the event.Like this: 

    <div id="clientSatSummaryViewTemplate" data-win-control="WinJS.Binding.Template">
                        <div class="img">
                            <span data-win-bind="innerText:Rating" id="rating"></span> 
                            <span data-win-bind="innerText:ClientName" id="clientName"></span>
                         </div> 
                    </div>

    And you can use this code in js file:

            var divList = document.getElementsByClassName(classname);
            for (var i = 0; i < divList.length ; i++)
            {           
                //addEventListener for every div 
                divList[i].addEventListener("click", clickevent);
            }       
    

    You can try it.

    Thanks!

    Tuesday, August 13, 2013 2:51 AM
    Moderator