0

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

enter image description here

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'];

enter image description here

  • Please share also some example data and more of your js code. As you can see with the example below the functionality is working as expected in general: developer.salesforce.com/docs/component-library/tools/… – Renji-xD Jun 25 at 11:11
  • Hi @Renji-xD , I have updated my question and added screen output. I have the same code as in example you provided me with. I don't know what is wrong with that.. Maybe you can suggest something? – Valentine Potapov Jun 25 at 11:23
  • @Renji-xD is it possible to implement the logic - when parent row is selected all its child rows are selected as well with lightning web component? – Valentine Potapov Jun 26 at 13:34
  • i guess so. 1. handle the onrowselection event, 2. call getSelectedRows to get all selected Rows, 3. write a method to find the respective objects in your data array, 4. recursively iterate over them and their children to build up a final list of new selectedRows which you assign to your property. I would recomment you are trying to implement it in such or a similiar way and open a new question if you have any specific issues / question on that topic (among the code you have written so far) as it is a different question then the original one – Renji-xD Jun 26 at 14:08
  • @Renji-xD Yeah I will do that now, cause it also has some tricky points. Thanks ! – Valentine Potapov Jun 26 at 14:19
0

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

  • works! Thank you for explanation! It was tricky – Valentine Potapov Jun 25 at 13:31
  • One downside to this component --- if you collapse an expanded row, the children will lose their selection state. Simply collapse/expand anything, and it will lose selection state! I put in a ticket with Salesforce and was told this is "Working as Intended" /facepalm – Zerkz Aug 20 at 14:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.