How to set checked on item in DetailsList control

Question

I use DetailsList component from office-ui-fabric-react library:

   import {DetailsList} from 'office-ui-fabric-react/lib/DetailsList';
   render () {
      const item = [
        {value: 'one'},
        {value: 'two'}
      ]
      return (
        <DetailsList
            checkboxVisibility={CheckboxVisibility.always}
            items={items}
            selection={selection}
        />
    }

How to set checked for item with value `two?

Bladderwort

is this resolved now? I need this too...and I found a useful link github.com/OfficeDev/office-ui-fabric-react/issues/1741 but I still didn't solved my problem. – Betteanne

Look at an example codepen.io/jasongore/pen/mdbPExx – Jeminah

@AndrejKirejeŭ the example above works thanks, but somehow despite no trace of setting of setSelection and setSelectionDetails hooks (in class components?) [scratching my head] – Adverbial

Answer 1

Noticed you passed a selection to DetailsList. There's a few methods in selection to do that, including:

• setAllSelected(isAllSelected: boolean)
• setKeySelected(key: string, isSelected: boolean, shouldAnchor: boolean)
• setIndexSelected(index: number, isSelected: boolean, shouldAnchor: boolean)

In your case, you can give each value a key. And then call setKeySelected somewhere (for example, componentDidMount) to tell DetailsList to select specific items.

Deist

what's key? is it a json object {value: 'one'} or as you said, we should assign a key somewhere meaning items should be a dict instead of list? – Pompadour

You need to give each value a key, for example. { key: 'some_key', value: 'some_value' }. You can also customize the way to get the key with IDetailsListProps.getKey. – Deist

Answer 2

I looked everywhere and could never find the answer. To set selected items basically on page load do the following:

<DetailsList
    columns={columns}
    items={getItems()}
    selection={getSelectedItems()}
/>

const getItems = () => {
     const items: any[] = [];

     itemList.map((item: any, i) => {
         items.push({
             key: i.toString(),
             Name: item.Name,
             Description: item.Description
         });
     });

     return [];
};

const getSelectedItems = (): ISelection => {
    const selection: Selection = new Selection();
    const items = getItems();

    selection.setItems(items);
    selectedItemsList.map((selectedItem: 
    any, s) => { 
         selection.setKeySelected(s.toString(), true, false);
    });

    return selection;
};

Hostelry

FYI - selection.setItems(items); needs to be called BEFORE the selection.setKeySelected( ). This resolved this issue for me, which i discovered by accident / trial-and-error. – Amerigo

Answer 3

Simply call selection.setAllSelected(true) inside useEffect if you want all the list items to be selected by default.

const selection = new Selection();
useEffect(() => {
   selection.setAllSelected(true)
}, [selection]);

Zollverein

Answer 4

React Typescript (tsx) Sample.

import { DetailsList, ISelection, Selection } from '@fluentui/react/lib/DetailsList';

// ...

export const Component = () => {

    const getSelectionDetails = (): string => {
      const selectionCount = selection.getSelection().length;
      return selectionCount
        ? `${selectionCount} items selected: ${selection.getSelection().map( (i: any) => i.key ).join('; ')}`
        : 'No items selected';
    }
    
    const createSelection = () => {
      return new Selection({
        onSelectionChanged: () => setSelectionDetails(getSelectionDetails()),
        getKey: (item: any) => item.key
      });
    };
      
    const [selection, setSelection] = React.useState(createSelection());
    const [selectionDetails, setSelectionDetails] = React.useState('');
    
    return <>
        <DetailsList
            // ...
            selection={selection}
            selectionMode={SelectionMode.multiple}
            // ...
        />
    </>;
}

Dedication