CODEWITHSUNDEEP
listviewselectionwinjs
Gergely Orosz
Gergely Orosz

Reputation: 6485

Changing ListView Selection Template in WinJS

I'd like to change the default selection template on ListView items. By default a 3 pixel wide gray border is applied to the currently selected item(s):

enter image description here

I did find in ui.js is that internally the _selectionTemplate property is set to the default border:

var selectionBorder = createNodeWithClass(WinJS.UI._selectionBorderContainerClass);
selectionBorder.appendChild(createNodeWithClass(WinJS.UI._selectionBorderClass + " " + WinJS.UI._selectionBorderTopClass));
selectionBorder.appendChild(createNodeWithClass(WinJS.UI._selectionBorderClass + " " + WinJS.UI._selectionBorderRightClass));
selectionBorder.appendChild(createNodeWithClass(WinJS.UI._selectionBorderClass + " " + WinJS.UI._selectionBorderBottomClass));
selectionBorder.appendChild(createNodeWithClass(WinJS.UI._selectionBorderClass + " " + WinJS.UI._selectionBorderLeftClass));

this._selectionTemplate = [];
this._selectionTemplate.push(createNodeWithClass(WinJS.UI._selectionBackgroundClass));
this._selectionTemplate.push(selectionBorder);
this._selectionTemplate.push(createNodeWithClass(WinJS.UI._selectionCheckmarkBackgroundClass));
var checkmark = createNodeWithClass(WinJS.UI._selectionCheckmarkClass);
checkmark.innerText = WinJS.UI._SELECTION_CHECKMARK;
this._selectionTemplate.push(checkmark);

However as _selectionTemplate is meant to be private it would seem to go against ListView design to modify the _selectionTemplate property itself. Is there a better workaround for modifying this default selection template?

Upvotes: 4

Views: 1244

Answers (1)

Adam Kinney
Adam Kinney

Reputation: 1075

Override the CSS class used by the default template. For example this will change the border to red:

.win-listview .win-container:hover{
    outline: rgba(255, 0, 0, 0.3) solid 3px;
}

Upvotes: 8

Related Questions