LIGHTNING TREE GRID WITH SEARCH FUNCTIONALITY

treeGridWithSearch.html

<template>
    <lightning-card title="Search In Tree Grid" icon-name="custom:custom57">
        <div class="slds-var-m-around_medium">
            <lightning-input type="search" onchange={handleKeyChange}
                class="slds-show slds-is-relative slds-var-m-bottom_small" label="Search">
            </lightning-input>
            <lightning-tree-grid columns={gridColumns} data={gridData} key-field="Id">
            </lightning-tree-grid>
        </div>
    </lightning-card>
</template>

treeGridWithSearch.js

import { LightningElement } from 'lwc';
import fetchAccountAndRelatedContacts from '@salesforce/apex/accountController.fetchAccountAndRelatedContacts';
const DELAY = 350;
export default class TreeGridWithSearch extends LightningElement {
    gridData;

    gridColumns = [
        {
            type: 'text',
            fieldName: 'Name',
            label: 'Name'
        },
        {
            type: 'text',
            fieldName: 'Phone',
            label: 'Phone'
        },
        {
            type: 'text',
            fieldName: 'AccountNumber',
            label: 'Account Number'
        },
        {
            type: 'text',
            fieldName: 'FirstName',
            label: 'First Name'
        },
        {
            type: 'text',
            fieldName: 'LastName',
            label: 'Last Name'

        }
    ];

    handleKeyChange(event) {
        // Debouncing this method: Do not actually invoke the Apex call as long as this function is
        // being called within a delay of DELAY. This is to avoid a very large number of Apex method calls.
        window.clearTimeout(this.delayTimeout);
        const searchKey = event.target.value;
        // eslint-disable-next-line @lwc/lwc/no-async-operation
        this.delayTimeout = setTimeout(() => {
            fetchAccountAndRelatedContacts({ searchKey: searchKey }).then((result) => {
                let data = JSON.parse(JSON.stringify(result));
                for (let i = 0; i < data.length; i++) {
                    data[i]._children = data[i]['Contacts'];
                    delete data[i]['Contacts'];
                }
                this.gridData = data;
            }).catch((error) => {
                console.log(error);
                this.gridData = undefined;
            });
        }, DELAY);
    }
}

Published by Sandeep Kumar

He is a Salesforce Certified Application Architect having 11+ years of experience in Salesforce.

Leave a Reply