locked
styling the listview item template based on values in the data source RRS feed

  • Question

  • Hi,

    I have defined a list view with groups similar to this page http://stephenwalther.com/archive/2012/05/18/metro-grouping-items-in-a-listview-control

    Now my contents in the item template are defined as follows

    <div id="productTemplate" data-win-control="WinJS.Binding.Template">
                        <div class="productSummary">
                            <h1><span data-win-bind="innerText:Accno"></span></h1>
                            <h3><span data-win-bind="innerText:Address"></span></h3>
                            <h2><span data-win-bind="innerText:Status"></span></h2> 
                        </div>
                    </div>

    What I would like is to format the background color of each item or set the font color of the text based on the value of the "Status" field. The values for Status are either complete or incomplete.

    For example the background color of the item is red for incomplete and blue for complete or the color of the text is red for all the items in that cell.

    How would I achieve this feature. Is this supported in WinJS.UI.ListView

    Thanks,

    Rajesh.

    Sunday, September 22, 2013 5:12 AM

Answers

  • Hi Rajesh,

    As I understand, the section called "Option B: Use a templating function" in the URL above helps change template based on data values for an item. I am not sure if that is exactly the code that should address your query, but the approach seems to one that can be helpful.

    -Sagar

    • Marked as answer by M.Rajesh Wednesday, September 25, 2013 9:21 AM
    Monday, September 23, 2013 10:28 AM

All replies

  • Monday, September 23, 2013 9:42 AM
  • Hi Sagar,

    Let me explain here my question "How to achieve the functionality of setting the background of a cell to be different color based on the value at runtime"

    At first:

    4 rows in the data source.

    2 rows have the value of Status  as 'complete'.

    2 rows have the value of Status as 'incomplete'.

    The listview displays 2 the data as 4 cells in the grid. 2 of them are complete and 2 of them are incomplete.

    I want the 2 cells that have the value Complete to have the back ground color in blue and the other 2 cells in red. This is the common color to specify that the task is complete or incomplete.

    On clicking one cell I navigate to another page showing the details of that task. the user enters some data and then can mark the task as complete or incomplete. Assume that he has marked the task as complete. So when the user navigates back to the grid page. 3 rows will have the value of Status as 'complete' and 1 row will have the value as 'incomplete'. Now 3 cells should have the back ground color as blue and only 1 cell in red.

    How do I achieve this at run time. The link that you mentioned here does not explain that feature.

    Hope that  I have explained the scenario clearly.

    Thanks,

    Rajesh.

    Monday, September 23, 2013 9:56 AM
  • Hi Rajesh,

    As I understand, the section called "Option B: Use a templating function" in the URL above helps change template based on data values for an item. I am not sure if that is exactly the code that should address your query, but the approach seems to one that can be helpful.

    -Sagar

    • Marked as answer by M.Rajesh Wednesday, September 25, 2013 9:21 AM
    Monday, September 23, 2013 10:28 AM
  • Hi Sagar,

    Thanks a lot for explaining this approach and on searching the documentation further I came across this link.

    This link explains clearly with examples how to achieve the desired functionality that I was looking for. I was able to implement this in my project and now the page looks cleaner and colorful.

    Thanks,

    Rajesh.

    Wednesday, September 25, 2013 9:23 AM
  • Glad to hear that it's working now !

    -Sagar

    Thursday, September 26, 2013 3:37 PM