Preselect rows in lightning tree grid

Question

I am working with lwc lightning tree grid and actually have a problem:

How to preselect rows automatically? I need the same action as with "expanded-rows" When I pass list of Ids to expanded-rows - rows are expanded when page is loaded When I pass list of Ids to selected-rows - rows are not selected.

Seems a bug..

HTML:

<lightning-tree-grid
        data={treeItems}
        columns={columns}
        selected-rows={selectedRows}
        expanded-rows={requestExpandRows}
        key-field="name">
</lightning-tree-grid>

JS file:

   import {
LightningElement,
track,
api,
wire
} from 'lwc';
import getTreeGridData from '@salesforce/apex/PartsOrderTreeGrid.getTreeGridData';

export default class TreeGrid extends LightningElement {
@track columns = [{
        type: 'text',
        fieldName: 'name',
        label: 'Order number'
    },
    {
        type: 'text',
        fieldName: 'irNumber',
        label: 'ir number'
    },
    {
        type: 'text',
        fieldName: 'createdDate',
        label: 'created date'
    },
    {
        type: 'text',
        fieldName: 'status',
        label: 'order status'
    }
];

 @api locationId;
 @api allPO;

 @track treeItems;
 @track error;

 @track myValue = "";
              handleChange(evt) {
                  this.myValue = evt.target.value;
                  console.log('Current value of the input: ' + evt.target.value);
              }

 @track selectedRows = ['00168581'];
 @track requestExpandRows = ['00168581'];

Answer 1

Code Example seems to be not complete - as it is not really clear where the data comes from. But based on the existing lines i assume you are wiring the data to a property via an apex method.

You are defining the selectedRows at construction Time - getting Data from the Server is asynchronous which means it tries to match the key against empty data. As afterwards no changes occur nothing is selected. Expanded Rows works because its owned by the tree grid component and has functionality to keep the state in sync while the selected rows are just passed through to the data table component. So my assumption is that you should try to update the selectedRows attributes or just set it after the data is fetched initially (you have to wire to a function not a property)

To illustrate what i mean find the following updated playground: https://developer.salesforce.com/docs/component-library/tools/playground/xnsuAEs4I/2/edit

The first button does not work because the selectedRows Data is not mutated. The second button works because a mutation to the selectedRows happens

As Alternative you can also just add e.g. a rendering condition so that the tree grid is only loaded when the data is existing:

Same example: https://developer.salesforce.com/docs/component-library/tools/playground/xnsuAEs4I/3/edit

Now the first button is also working for the second table as at initialisation time the data is already there