locked
ListView - Is it possible to display a element depending on item value

    Question


  • Hi there, I'm not that familiar with the terminology, but i'll try to explain what i want to achieve.

    This is my itemtamplate:

    <div id="movie_itemtemplate" data-win-control="WinJS.Binding.Template">
        <div class="item">
    
            <!-- TODO: Display this image only if the item.alert == true -->
            <img class="item-alert" src="images/alert.png" />
    
            <img class="item-image" src="#" data-win-bind="src: posterImage; alt: title" />
    
            <div class="item-overlay">
                <h4 class="item-title" data-win-bind="textContent: title"></h4>
            </div>
        </div>
    </div>

    I want to display the .item-alert image only if the item.alert has value true, is it possible?

    Hope i made it more clear

    • Edited by Henrik Sjödahl Saturday, April 6, 2013 9:19 AM Developed the question a bit
    Friday, April 5, 2013 4:12 PM

Answers

  • Yes, you can do that. For example, you can create your itemTemplate during runtime/ through JavaScript rather than creating it in markup and then set the value of img.style.display = "none" when it does not meet the criteria. See this link on how to create and assign the itemTemplate through JavaScript: http://msdn.microsoft.com/en-us/library/windows/apps/Hh700705.aspx

    Notice how the itemTemplate function is used to create the template at runtime. When the data does not meet the property, just set the img.style.display = "none" and that should work for you. When you do this, also make sure that you set the height/width of the parent <div> to a fixed value, so that the view does not become distorted. You can do something like this (using the code example of the link):

                listView.itemTemplate = itemTemplateFunction;
                ....

            itemTemplateFunction: function (itemPromise) {
                    ....
                    if(item.data.alert == "false")
                        img.style.display = "none";
                    ....
                    div.appendChild(childDiv);
                    div.style.width = "100px";
                    div.style.height = "100px";
                    return div;

     


    @prashantphadke || Windows Store Developer Solutions #WSDevSol || Want more solutions? See our blog! http://aka.ms/t4vuvz

    Monday, April 8, 2013 5:36 PM
    Moderator

All replies

  • Your question is a bit confusing, can you elaborate on it further? Generally speaking a ListView has an ItemDataSource - corresponding to the actual data that is bound to it. What gets displayed as well as the level of information (image, text etc) in the ListView is controlled by the ItemTemplate. Can you post some code to understand your question correctly?


    @prashantphadke || Windows Store Developer Solutions #WSDevSol || Want more solutions? See our blog! http://aka.ms/t4vuvz

    Friday, April 5, 2013 11:22 PM
    Moderator
  • Hi, i changed the question a bit, hopefully i explained my self better now
    Saturday, April 6, 2013 9:20 AM
  • Yes, you can do that. For example, you can create your itemTemplate during runtime/ through JavaScript rather than creating it in markup and then set the value of img.style.display = "none" when it does not meet the criteria. See this link on how to create and assign the itemTemplate through JavaScript: http://msdn.microsoft.com/en-us/library/windows/apps/Hh700705.aspx

    Notice how the itemTemplate function is used to create the template at runtime. When the data does not meet the property, just set the img.style.display = "none" and that should work for you. When you do this, also make sure that you set the height/width of the parent <div> to a fixed value, so that the view does not become distorted. You can do something like this (using the code example of the link):

                listView.itemTemplate = itemTemplateFunction;
                ....

            itemTemplateFunction: function (itemPromise) {
                    ....
                    if(item.data.alert == "false")
                        img.style.display = "none";
                    ....
                    div.appendChild(childDiv);
                    div.style.width = "100px";
                    div.style.height = "100px";
                    return div;

     


    @prashantphadke || Windows Store Developer Solutions #WSDevSol || Want more solutions? See our blog! http://aka.ms/t4vuvz

    Monday, April 8, 2013 5:36 PM
    Moderator