[SalesForce] Preselect rows in lightning tree grid

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

Best Answer

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

Related Solutions

[SalesForce] Unable to Populate Expanded Rows in LWC lightning-tree-grid

I resolved it by replacing

this.profileRequestExpandRows.push(expando);
tempjson = JSON.parse(JSON.stringify(data).split('Cases__r').join('_children'));
this.profileRequestData = tempjson;

with

tempjson = JSON.parse(JSON.stringify(data).split('Cases__r').join('_children'));
this.profileRequestData = tempjson;
this.profileRequestExpandRows = expando;

The first version ended up creating an array within an array (it printed [["id1","id2"]] in the console), which the lwc couldn't use.

[SalesForce] Make child rows selected on selecting parent row – lwc tree grid

I thought I'd provide an additional answer to this thread, since the accepted solution cannot accommodate de-selecting child rows when the parent is de-selected. This solution allows for de-selecting parents, de-selecting children separately from the parent, auto-selecting parents when all children are selected, and auto-deselecting parents when at least one child is deselected.

HTML:

<lightning-tree-grid 
    columns={columnList}
    data={projectList}
    key-field="Id"
    onrowselection={updateSelectedRows}
    selected-rows={selectedRows}>
</lightning-tree-grid>

JS:

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

export default class Test12 extends LightningElement {
    @api recordId;
    @track columnList;  // set by apex wire service using field set
    @track projectListObj;  // the data as returned by the apex wire service
    @track projectList;  // wire service data required modification for correct display
    @track selectedRows = [];
    @track currentSelectedRows;  // used to track changes

    @wire(getProjectRecords, {  projectId: '$recordId'   })
    wiredProjects({ error, data }) {
        var dataObj;

        if(data) {
            dataObj = JSON.parse(data);
            this.projectListObj = dataObj;
            this.projectList = JSON.parse(JSON.stringify(dataObj).split('items').join('_children'));
            }
        }
    }

    updateSelectedRows() {
        var tempList = [];
        var selectRows = this.template.querySelector('lightning-tree-grid').getSelectedRows();
        if(selectRows.length > 0){
            selectRows.forEach(record => {
                tempList.push(record.Id);
            })

            // select and deselect child rows based on header row
            this.projectListObj.forEach(record => {
                // if header was checked and remains checked, do not add sub-rows

                // if header was not checked but is now checked, add sub-rows
                if(!this.currentSelectedRows.includes(record.Id) && tempList.includes(record.Id)) {
                    record.items.forEach(item => {
                        if(!tempList.includes(item.Id)) {
                            tempList.push(item.Id);
                        }
                    })
                }

                // if header was checked and is no longer checked, remove header and sub-rows
                if(this.currentSelectedRows.includes(record.Id) && !tempList.includes(record.Id)) {
                    record.items.forEach(item => {
                        const index = tempList.indexOf(item.Id);
                        if(index > -1) {
                            tempList.splice(index, 1);
                        }
                    })
                }

                // if all child rows for the header row are checked, add the header
                // else remove the header
                var allSelected = true;
                record.items.forEach(item => {
                    if(!tempList.includes(item.Id)) {
                        allSelected = false;
                    }
                })

                if(allSelected && !tempList.includes(record.Id)) {
                    tempList.push(record.Id);
                } else if(!allSelected && tempList.includes(record.Id)) {
                    const index = tempList.indexOf(record.Id);
                    if(index > -1) {
                        tempList.splice(index, 1);
                    }
                }

            })

            this.selectedRows = tempList;
            this.currentSelectedRows = tempList;
        }
    }

Best Answer

Related Solutions

[SalesForce] Unable to Populate Expanded Rows in LWC lightning-tree-grid

[SalesForce] Make child rows selected on selecting parent row – lwc tree grid

Related Topic