locked
Deleting an item from the listview programmatically... RRS feed

  • Question

  • Hi,

    I have created Tiles using listview. Now i want to delete the particular tile when user clicks on it.

    How to delete  that tile after selecting it.

    I m using this code in javascript to display tiles.

    function FoodItemDispalyFunc() {
                    WinJS.UI.process(element).then(function () {
                        WinJS.UI.setOptions(ListViewOfFooditem, {
                            itemDataSource: UserDetail.FoodItemList.dataSource,
                            itemTemplate: FoodItemTamplate,
                            selectionMode: 'multi',
                          
                            swipeBehavior: 'select',
                            layout: { type: WinJS.UI.GridLayout }
                        });
                    });

     


    Shilpa Monocept Windows store apps

    Friday, January 18, 2013 10:25 AM

Answers

  • Hi,

    Just refer to my blog of that at: http://blogs.msdn.com/b/win8devsupport/archive/2013/01/10/using-html5-javascript-in-windows-store-apps-data-access-and-storage-mechanism-iii.aspx .

    Any more question, please feel free to reply.


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by WinNRock Thursday, January 24, 2013 6:48 AM
    Monday, January 21, 2013 9:32 AM
  • Hi Shilpa_A_S,

    The items be displayed on WinJS.UI.ListView control is controlled by the underlying datasource object associated with it. Generally, we will construct a WinJS.Binding.List objecct and bind it to the ListView control. So if you want to remove an item (such as the one selected by user), what you need to do is just locate the underlying data item in the binding list object and remove it. For example, you can use the "splice" method to remove certain items from the list and then assign the new list as datasource of the ListView control.


    #List.splice method (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/hh700810.aspx


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by WinNRock Thursday, January 24, 2013 6:48 AM
    Monday, January 21, 2013 9:50 AM
    Moderator
  • For a function to be accesible through the binding it must be "marked for processing", otherwise when the binding is done, WinJS won't "see" the function.

    Another option is to define the function at the same level of the "ready" handler on the PageControl .js but in your case it might be easier just to mark it:

    WinJS.Utilities.markSupportedForProcessing(deleteEntry);

    After the function is created and declared.

    • Marked as answer by WinNRock Thursday, January 24, 2013 6:48 AM
    Tuesday, January 22, 2013 1:18 PM
  • Just add to Ealsur's suggestion. You can also use "WinJS.Namespace.define" to expose some global functions which can be directly invoked in html template.

    #WinJS.Namespace.define function (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/xaml/br212667.aspx

    http://msdn.microsoft.com/en-us/library/windows/apps/Hh967793.aspx

    Also, the following ebook is strongly recommended, it also mentioned many useful topics (such as the question discussed here) in the first few chapters.

    #Free ebook: Programming Windows 8 Apps with HTML, CSS, and JavaScript (First Preview)
    http://blogs.msdn.com/b/microsoft_press/archive/2012/06/04/free-ebook-programming-windows-8-apps-with-html-css-and-javascript-first-preview.aspx


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by WinNRock Thursday, January 24, 2013 6:48 AM
    Wednesday, January 23, 2013 5:38 AM
    Moderator
  • Hi,

    One thing you should pay attention is when the user interacts with an element, the ListView captures that interaction and uses it to determine whether the user selected or invoked an item or is panning through items. For an interactive element, such as a control, to receive input, you must attach the win-interactive class to the interactive element or one of its parent elements. That element and its children receive the interaction and no longer trigger events for the ListView.

    When you attach the win-interactive to an element in a item template, be sure that the element doesn't fill the entire item, otherwise the user won't have a way to select or invoke that item.

    To add interactive elements to your item template, you must use a templating function instead of aWinJS.Binding.Template.

    More details, please refer to: http://msdn.microsoft.com/en-us/library/windows/apps/hh700705.aspx .


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by WinNRock Thursday, January 24, 2013 6:48 AM
    Wednesday, January 23, 2013 10:32 AM

All replies

  • Hi,

    Just refer to my blog of that at: http://blogs.msdn.com/b/win8devsupport/archive/2013/01/10/using-html5-javascript-in-windows-store-apps-data-access-and-storage-mechanism-iii.aspx .

    Any more question, please feel free to reply.


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by WinNRock Thursday, January 24, 2013 6:48 AM
    Monday, January 21, 2013 9:32 AM
  • Hi Shilpa_A_S,

    The items be displayed on WinJS.UI.ListView control is controlled by the underlying datasource object associated with it. Generally, we will construct a WinJS.Binding.List objecct and bind it to the ListView control. So if you want to remove an item (such as the one selected by user), what you need to do is just locate the underlying data item in the binding list object and remove it. For example, you can use the "splice" method to remove certain items from the list and then assign the new list as datasource of the ListView control.


    #List.splice method (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/hh700810.aspx


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by WinNRock Thursday, January 24, 2013 6:48 AM
    Monday, January 21, 2013 9:50 AM
    Moderator
  • HI Steven Cheng

    Thankyou for your suggestion

     <div id="FoodItemTamplate" data-win-control="WinJS.Binding.Template">
            <div id="FoodNamePriceQuant">
                <div id="FoodId" data-win-bind="innerText: ProductId" style="></div>
                <h3 id="FoodName" data-win-bind="innerText: Name"></h3><hr />
                <h3 id="FoodQuantity" data-win-bind="innerText: Quantity"></h3><hr /> 
                <div id="DeleteButton" class="win-interactive" > <img class="deleteButton" data-win-bind="onclick:deleteEntry(this)" src="../images/download%20(2).jpg" /></div>            
             </div>

    If  img is clicked then  deleteEnrty function is called. I defined this deleteEntry function in ready function but it showing an error

    deleteEntry is undefined. Why its showing error and where to define this deleteEntry func.



    Shilpa Monocept Windows store apps

    Tuesday, January 22, 2013 8:10 AM
  • For a function to be accesible through the binding it must be "marked for processing", otherwise when the binding is done, WinJS won't "see" the function.

    Another option is to define the function at the same level of the "ready" handler on the PageControl .js but in your case it might be easier just to mark it:

    WinJS.Utilities.markSupportedForProcessing(deleteEntry);

    After the function is created and declared.

    • Marked as answer by WinNRock Thursday, January 24, 2013 6:48 AM
    Tuesday, January 22, 2013 1:18 PM
  • Just add to Ealsur's suggestion. You can also use "WinJS.Namespace.define" to expose some global functions which can be directly invoked in html template.

    #WinJS.Namespace.define function (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/xaml/br212667.aspx

    http://msdn.microsoft.com/en-us/library/windows/apps/Hh967793.aspx

    Also, the following ebook is strongly recommended, it also mentioned many useful topics (such as the question discussed here) in the first few chapters.

    #Free ebook: Programming Windows 8 Apps with HTML, CSS, and JavaScript (First Preview)
    http://blogs.msdn.com/b/microsoft_press/archive/2012/06/04/free-ebook-programming-windows-8-apps-with-html-css-and-javascript-first-preview.aspx


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by WinNRock Thursday, January 24, 2013 6:48 AM
    Wednesday, January 23, 2013 5:38 AM
    Moderator
  • Ya i tried with this but in deleteEntry function we are passing one parameter that is necessary for me.

    If i define like this

    WinJS.Utilities.markSupportedForProcessing(deleteEntry(selectedEntry))

    then its showing selectedEntry is undefined.


    Shilpa Monocept Windows store apps.

    WinJS.Utilities.markSupportedForProcessing(deleteEntry);

    By using this we can declare it globally but on button click its not calling deleteEntry even if i dont pass parameter.

    what is solution for this??


    • Edited by WinNRock Wednesday, January 23, 2013 6:13 AM
    Wednesday, January 23, 2013 6:00 AM
  • Hi,

    One thing you should pay attention is when the user interacts with an element, the ListView captures that interaction and uses it to determine whether the user selected or invoked an item or is panning through items. For an interactive element, such as a control, to receive input, you must attach the win-interactive class to the interactive element or one of its parent elements. That element and its children receive the interaction and no longer trigger events for the ListView.

    When you attach the win-interactive to an element in a item template, be sure that the element doesn't fill the entire item, otherwise the user won't have a way to select or invoke that item.

    To add interactive elements to your item template, you must use a templating function instead of aWinJS.Binding.Template.

    More details, please refer to: http://msdn.microsoft.com/en-us/library/windows/apps/hh700705.aspx .


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by WinNRock Thursday, January 24, 2013 6:48 AM
    Wednesday, January 23, 2013 10:32 AM