Single selection List

[mjain]

How to make a single selection Virtual Tile List?

[JonFitbit]

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?

[mjain]

I want it to be like a radio button.

[JonFitbit]

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;
    }
  });
}

[syadav]

@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.

[mjain]

@JonFitbit 

Your solution working fine with static tile-list.

Please provide the solution for virtual-tile-list