locked
How to remove a Binding.List item with a checkbox within ListView?

    Question

  • Hi everyone,

    I am trying to make a simple to-do Windows 8 app with Javascript and HTML/CSS.

    I used WinJS.Binding.List and WinJS.UI.ListView to make the simple UI and wire up a simple list of to-dos. The user could also add a new task to it.

    However, I am now trying to have a checkbox inside the ListView, which will be placed next to each to-do so that the user could toggle 'finished' and the to-do will be deleted. The problem is, although I was able to wire up an event handler to my checkbox with:

    onclick="Home.deleteFunction(event)"

    I am not sure what to write in the deleteFunction() as I do not know how to get the address to the to-do that has the checkbox clicked because in order to use this method:

    Home.taskListShow.splice(key, 1);

    a key, pointing to the item, needs to be provided. Do you know how to find this key? 

    Here is my code:

    <body>
    	<div id="toDoTemplate" data-win-control="WinJS.Binding.Template">
    		<div class="mainClass">
    			<div class="todoClass">
    				<div class="toDoMask">
    					<div class="toDo">
    						<h2 data-win-bind="textContent:task"></h2>
    					</div>
    				</div>
    				<div class="quoteMask">
    					<div class="quote">
    						<h4 data-win-bind="textContent:quote"></h4>
    					</div>
    				</div>
    			</div>
    			<div class="delete-button">
    				<div class="checkbox">
    					<input class="delete-box" type="checkbox" onclick="Home.deleteFunction(event)" style="width: 25px; height: 25px;">
    				</div>
    			</div>
    		</div>
    	</div>
       <div class="win-ui-light appGrid">
            <div class="appViewContentMask">
            	<div class="appViewContent">
            		<div id="gridViewToDo" data-win-control="WinJS.UI.ListView" data-win-options="{itemTemplate:select('#toDoTemplate'), layout:{type:WinJS.UI.GridLayout}}"></div>
            	</div>
            </div>
        </div>
    </body>

    Thank you.

    Sunday, December 1, 2013 2:39 AM

Answers

  • Hi,

    Hope below link helps:

    http://social.msdn.microsoft.com/Forums/windowsapps/en-US/88bc89ca-529f-4d58-b10b-c0b1a5d275d7/data-binding-to-toggle-checked-property?forum=winappswithhtml5 

    Monday, December 2, 2013 10:16 AM