Single selection for Collection component

Hi,

I was just wondering if it was possible to customize the Collection component in C# Bot so that only one item in the collection can be selected at a time. If so could the getSelectedItems be used to get the singular selected?

Cheers

Hey Sam! Just letting you know that I have forwarded this questions onto our techies, so hopefully you will have a response soon.

Hi Sam

This sort of thing is possible. The selected items can be made controlled and you can define what things are selected in the component that is rendering the collection. For example, in this case I have a function component that is forcing only one item to be selected.

function SingleSelectedCollection() {
	const data = [
		{id: "1", display: "Hello"},
		{id: "2", display: "World"},
		{id: "3", display: "Lorem"},
		{id: "4", display: "Ipsum"},
	]

	const [selectedItem, setSelectedItem] = useState<string | undefined>();

	return (
		<Collection
			collection={data}
			headers={[
				{name: 'id', displayName: 'Id'},
				{name: 'display', displayName: 'Display'},
			]}
			selectableItems
			itemSelectionChanged={((checked, changedItems) => {
				if (checked) {
					setSelectedItem(changedItems[0]?.id);
					return [changedItems[0]];
				} else {
					setSelectedItem(undefined);
					return [];
				}
			})}
			getSelectedItems={() => {
				return [data.find(x => x.id === selectedItem)];
			}}
			menuCountFunction={() => selectedItem === undefined ? 0 : 1}
		/>
	);
}
1 Like

Thanks Jack! That is really helpful.

I have implemented this in a private class function instead of a function component. However, it seems to not let me select any of the items now. Is this because I am not using the state and instead a class property?

Additionally, apart from the itemSelectionChanged is there a function for when a row is selected. I intend to update a series of graphs on the page depending on what row of the search is selected, using the data from the collection to update the graphs.

If the selection is not changing then it is means that the result of the getSelectedItems function is incorrect. I would double check to make sure that the backing array is being changed correctly.

Currently the only way to listen to the row being selected is the itemSelectionChanged callback.