12-17-2018 02:48
12-17-2018 02:48
How to make a single selection Virtual Tile List?
12-17-2018 03:17 - edited 12-17-2018 03:18
12-17-2018 03:17 - edited 12-17-2018 03:18
Can you elaborate on what you need? Are you trying to click a tile list item, then show a detail view? or do you mean like a list of radio buttons?
12-17-2018 03:27
12-17-2018 03:27
I want it to be like a radio button.
12-17-2018 03:49
12-17-2018 03:49
If you follow the checkbox list example, you can deselect the other items like this:
import document from "document"; let tileList = document.getElementById("tile-list"); let tileItems = tileList.getElementsByClassName("tile-item"); let tileState = {} tileItems.forEach((element, index) => { tileState[index] = element.firstChild.value; // initial state element.firstChild.onclick = (evt) => { tileState[index] = !tileState[index]; uncheckAllExceptSelected(index); console.log(`item ${index} :: ${tileState[index] ? "checked" : "unchecked"}`) }; }); function uncheckAllExceptSelected(selected) { tileItems.forEach((element, index) => { if (index !== selected) { tileState[index] = false; element.firstChild.value = 0; } }); }
12-17-2018 06:19
12-17-2018 06:19
@JonFitbit Is it possible to implement the radio button functionality in dynamic(virtual tile list) also, as per your comment its working fine static tile-list. Thanks in advance.
12-19-2018 06:40
12-19-2018 06:40
Your solution working fine with static tile-list.
Please provide the solution for virtual-tile-list