A few Q&A bits for the WinJS ListView (WinJS 1.0 and 2.0)

Q: I've implemented a VirtualizedDataSource that retrieves RSS items from a feed, and this source is bound to a ListView. How do I change an items color or other attribute without reloading the whole list?

A: The key to dynamic data binding for any value is to make sure it's observable. This is the purpose of the WinJS.Binding.as method, which will create add observability to any object.

Q. How do I programmatically select items in a ListView?

A. This is done through the ListView's selection property. This is an object with an interface called ISelection, which just means that the object has those methods. (We refer to an interface in this way for JavaScript objects because there's not a discrete class to refer to otherwise.) These methods include add, clear, set, remove, and selectAll. By changing the state of this object you change the ListView's selection.

Q. Is it possible to change a ListView item's checkmark character?

A. The default checkmark is character uE081 within the item container. There isn't a way to directly change it, however, so you basically have to hide the existing checkmark and add you own:

/* Configure your own */
.win-selection-checkmark::before {
    content: 'E0A5'; /* Your character here */;
    color: red; /* Whatever color your want*/
    font-size: 30px; /* Whatever is appropriate */
}

/* Hide the default */
.win-selection-checkmark {
    color: transparent; /* Make the default disappear */
    font-size: 0px; /* Size it to zero so it doesn't affect layout */
}

3 Comments

  1. Pierre Segalen
    Posted June 26, 2014 at 7:07 am | Permalink

    Hi Kraig,

    Do you know why there is no cellspanning for vertical grid layouts or list layouts? Is it technically really harder to do it vertically than horizontally?

    Do you know how I could handle a custom div before the first element of my ListView which has a ListLayout? Should I create a scrollable div containning the div and my ListView and disable the ListView’s scroll? If so, how do I disable a LV scroll?

    Thanks in advance!

    PS: After searching the web for a long time I couldn’t find any answer for these questions.

  2. kraigb
    Posted June 26, 2014 at 9:21 am | Permalink

    Cell spanning is not technically harder, but a matter of prioritization. So far as I know, there hasn’t been many requests along these lines; various WinJS features were added at the behest of the Bing apps teams (Sports, News, Travel, etc.), so that’s what drove the feature decisions. In short, it’s entirely possible but wasn’t an investment that the WinJS team felt it was necessary to make.

    If I understand your second question, you want to insert some element above a ListLayout ListView so that it more or less behaves like an element in the ListView, but technically isn’t.

    There are two approaches that come to mind. First, if you use a rendering function for the ListView rather than a declarative template, then you can prepend some data item for this custom element to your data source (making it item 0), and then have the rendering function pick that up and create a different element than it does for the rest of the data items. This way that element is part of the ListView and you can depend on the ListView’s panning behavior.

    The other way is to wrap the element and ListView, like you say, and then pan that parent element and not the ListView. To disable ListView panning, set overflow-y: hidden for this selector:

    .win-listview > .win-viewport.win-vertical {
    overflow-y: hidden;
    }
    Another way of doing it is to make sure the wrapper div has overflow-y: auto, as you would need anyway, and then make sure the ListView child element has a height equal to its full height so that it won’t think it has any vertical overflow.

  3. Pierre Segalen
    Posted June 27, 2014 at 1:54 am | Permalink

    Thanks for these pieces of information!

    Ok for the vertical cell spanning, I saw in the MSDN forums that you’ve said that creating such a layout would be possible so maybe I’ll try it one day…

    For my second question, my first element’s height must be twice the height of others so it leads back to my first question… :)

    Your second proposition works well but it seems that the ListView loses all its rendering optimization: elements render in 5 to 10 seconds after the scrolling stops and the “two-time” rendering doesn’t seem to be functionnal anymore. Plus, the “oniteminvoked” event doesn’t seem to trigger anymore.

    I think I’ll inject dummy data after my first item, render my item to make it twice its height and creating a “display:none” div for the dummy data… Maybe that will work?

    Thanks again.