search

vijayk3327 / LWC

1 stars 0 forks source link

Create dynamic tree grid with expande / collapse selected rows and select checkbox for the entire row select/deselect in Salesforce lightning web component LWC #61

Open vijayk3327 opened 1 year ago

vijayk3327 commented 1 year ago

In this post we are going to learn about How to Create dynamic tree grid with expanded/collapsed selected rows and select checkbox for the entire row select/deselect in Salesforce lightning web component LWC.

→ Get source code live demo link:-

Step 1:- Create Lightning Web Component : lwcTreeGrid.html

` `

Step 2:- Create Lightning Web Component : lwcTreeGrid.js

` import { LightningElement, track } from 'lwc'; import { EXAMPLES_COLUMNS_DEFINITION_BASIC, EXAMPLES_DATA_BASIC, } from './sampleData';

export default class LwcTreeGrid extends LightningElement { @track currentExpandedRows;

// definition of columns for the tree grid
gridColumns = EXAMPLES_COLUMNS_DEFINITION_BASIC;

// data provided to the tree grid
gridData = EXAMPLES_DATA_BASIC;

// list of names for rows that are expanded
gridExpandedRows = [
    '123556',
    '123556-A',
    '123556-B',
    '123556-B-B',
    '123557',
];

// retrieve the list of rows currently marked as expanded
getCurrentExpandedRows() {
    const treegrid = this.template.querySelector('.lgc-example-treegrid');
    this.currentExpandedRows = treegrid.getCurrentExpandedRows().toString();
}

}`

Step 3:- Create Lightning Web Component : sampleData.js

` export const KEYFIELD = 'name';

export const COLUMNS_DEFINITION_BASIC = [ { type: 'text', fieldName: 'accountName', label: 'Account Name', }, { type: 'phone', fieldName: 'phone', label: 'Phone Number', }, ];

export const COLUMNS_DEFINITION_NONWHITELIST = [ { type: 'text', fieldName: 'accountName', label: 'Account Name', }, { type: 'phone', fieldName: 'phone', label: 'Phone Number', sortable: true, }, ];

export const EXAMPLES_COLUMNS_DEFINITION_BASIC = [ { type: 'text', fieldName: 'accountName', label: 'Account Name', initialWidth: 300, }, { type: 'number', fieldName: 'employees', label: 'Employees', }, { type: 'phone', fieldName: 'phone', label: 'Phone Number', }, { type: 'url', fieldName: 'accountOwner', label: 'Account Owner', typeAttributes: { label: { fieldName: 'accountOwnerName' }, }, }, { type: 'text', fieldName: 'billingCity', label: 'Billing City', }, ];

export const EXPANDED_ROWS_BASIC = ['584996-s7', '377526-zg'];

export const EXPANDED_ROWS_MISSING_CHILDREN_CONTENT = [ '584996-s7', '377526-zg', '816682-xr', ];

export const EXPANDED_ROWS_INVALID = [ '584996-s7', '377526-zg', 'AWEFUL-bad_iD', '882894-s3', 'PiCkLeS', '31337-ID', ];

export const SELECTED_ROWS_BASIC = ['125313-7j', '584996-s7'];

export const SELECTED_ROWS_INVALID = [ '584996-s7', '377526-zg', 'AWEFUL-bad_iD', '882894-s3', 'PiCkLeS', '31337-ID', ];

export const DATA_BASIC = [ { name: '125313-7j', accountName: 'Dach-Welch', phone: '837-555-0100', }, { name: '584996-s7', accountName: 'Corkery-Windler', phone: '837-555-0100', _children: [ { name: '747773-jw', accountName: 'Corkery-Abshire', phone: '837-555-0100', }, { name: '377526-zg', accountName: 'Robel, Friesen and Flatley', phone: '837-555-0100', _children: [ { name: '955330-wp', accountName: 'Donnelly Group', phone: '837-555-0100', }, { name: '343693-9x', accountName: 'Kshlerin Group', phone: '837-555-0100', }, ], }, { name: '638483-y2', accountName: 'Bruen, Steuber and Spencer', phone: '837-555-0100', }, ], }, { name: '306979-mx', accountName: 'Spinka LLC', phone: '837-555-0100', }, { name: '066195-o1', accountName: 'Koelpin LLC', phone: '837-555-0100', _children: [], }, ];

export const DATA_MISSING_CHILDREN_CONTENT = [ { name: '125313-7j', accountName: 'Dach-Welch', phone: '837-555-0100', }, { name: '584996-s7', accountName: 'Corkery-Windler', phone: '837-555-0100', _children: [], }, { name: '816682-xr', accountName: 'Schmitt-Littel', phone: '837-555-0100', _children: [ { name: '118985-mf', accountName: 'Hegmann-Turcotte', phone: '837-555-0100', }, { name: '841476-yo', accountName: 'Kuhlman LLC', phone: '837-555-0100', }, ], }, { name: '653331-j4', accountName: 'Swaniawski-Hilpert', phone: '366-145-6134', _children: [ { name: '605249-ei', accountName: 'Swaniawski, Veum and Barton', phone: '837-555-0100', }, { name: '686777-5d', accountName: 'Lubowitz, McClure and Russel', phone: '837-555-0100', }, { name: '582166-n4', accountName: 'Reichel-Jerde', phone: '837-555-0100', _children: [ { name: '513683-mm', accountName: 'Tromp Inc', phone: '837-555-0100', }, ], }, ], }, { name: '306979-mx', accountName: 'Spinka LLC', phone: '837-555-0100', }, { name: '066195-o1', accountName: 'Koelpin LLC', phone: '837-555-0100', _children: [], }, ];

export const EXAMPLES_DATA_BASIC = [ { name: '123555', accountName: 'Rewis Inc', employees: 3100, phone: '837-555-0100', accountOwner: 'http://salesforce.com/fake/url/jane-doe', accountOwnerName: 'Jane Doe', billingCity: 'Phoeniz, AZ', },

 {
     name: '123556',
     accountName: 'Acme Corporation',
     employees: 10000,
     phone: '837-555-0100',
     accountOwner: 'http://salesforce.com/fake/url/jane-doe',
     accountOwnerName: 'John Doe',
     billingCity: 'San Francisco, CA',
     _children: [
         {
             name: '123556-A',
             accountName: 'Acme Corporation (Bay Area)',
             employees: 3000,
             phone: '837-555-0100',
             accountOwner: 'http://salesforce.com/fake/url/jane-doe',
             accountOwnerName: 'John Doe',
             billingCity: 'New York, NY',
             _children: [
                 {
                     name: '123556-A-A',
                     accountName: 'Acme Corporation (Oakland)',
                     employees: 745,
                     phone: '837-555-0100',
                     accountOwner: 'http://salesforce.com/fake/url/jane-doe',
                     accountOwnerName: 'John Doe',
                     billingCity: 'New York, NY',
                 },
                 {
                     name: '123556-A-B',
                     accountName: 'Acme Corporation (San Francisco)',
                     employees: 578,
                     phone: '837-555-0100',
                     accountOwner: 'http://salesforce.com/fake/url/jane-doe',
                     accountOwnerName: 'Jane Doe',
                     billingCity: 'Los Angeles, CA',
                 },
             ],
         },

         {
             name: '123556-B',
             accountName: 'Acme Corporation (East)',
             employees: 430,
             phone: '837-555-0100',
             accountOwner: 'http://salesforce.com/fake/url/jane-doe',
             accountOwnerName: 'John Doe',
             billingCity: 'San Francisco, CA',
             _children: [
                 {
                     name: '123556-B-A',
                     accountName: 'Acme Corporation (NY)',
                     employees: 1210,
                     phone: '837-555-0100',
                     accountOwner: 'http://salesforce.com/fake/url/jane-doe',
                     accountOwnerName: 'Jane Doe',
                     billingCity: 'New York, NY',
                 },
                 {
                     name: '123556-B-B',
                     accountName: 'Acme Corporation (VA)',
                     employees: 410,
                     phone: '837-555-0100',
                     accountOwner: 'http://salesforce.com/fake/url/jane-doe',
                     accountOwnerName: 'John Doe',
                     billingCity: 'New York, NY',
                     _children: [
                         {
                             name: '123556-B-B-A',
                             accountName: 'Allied Technologies',
                             employees: 390,
                             phone: '837-555-0100',
                             accountOwner:
                                 'http://salesforce.com/fake/url/jane-doe',
                             accountOwnerName: 'Jane Doe',
                             billingCity: 'Los Angeles, CA',
                             _children: [
                                 {
                                     name: '123556-B-B-A-A',
                                     accountName: 'Allied Technologies (UV)',
                                     employees: 270,
                                     phone: '837-555-0100',
                                     accountOwner:
                                         'http://salesforce.com/fake/url/jane-doe',
                                     accountOwnerName: 'John Doe',
                                     billingCity: 'San Francisco, CA',
                                 },
                             ],
                         },
                     ],
                 },
             ],
         },
     ],
 },

 {
     name: '123557',
     accountName: 'Rhode Enterprises',
     employees: 6000,
     phone: '837-555-0100',
     accountOwner: 'http://salesforce.com/fake/url/jane-doe',
     accountOwnerName: 'John Doe',
     billingCity: 'New York, NY',
     _children: [
         {
             name: '123557-A',
             accountName: 'Rhode Enterprises (UCA)',
             employees: 2540,
             phone: '837-555-0100',
             accountOwner: 'http://salesforce.com/fake/url/jane-doe',
             accountOwnerName: 'John Doe',
             billingCity: 'New York, NY',
         },
     ],
 },

 {
     name: '123558',
     accountName: 'Tech Labs',
     employees: 1856,
     phone: '837-555-0100',
     accountOwner: 'http://salesforce.com/fake/url/jane-doe',
     accountOwnerName: 'John Doe',
     billingCity: 'New York, NY',
     _children: [
         {
             name: '123558-A',
             accountName: 'Opportunity Resources Inc',
             employees: 1934,
             phone: '837-555-0100',
             accountOwner: 'http://salesforce.com/fake/url/jane-doe',
             accountOwnerName: 'John Doe',
             billingCity: 'Los Angeles, CA',
         },
     ],
 },

];

export const EXAMPLES_DATA_LAZY_LOADING = [ { name: '123555', accountName: 'Rewis Inc', employees: 3100, phone: '837-555-0100', accountOwner: 'http://salesforce.com/fake/url/jane-doe', accountOwnerName: 'Jane Doe', billingCity: 'Phoeniz, AZ', },

 {
     name: '123556',
     accountName: 'Acme Corporation',
     employees: 10000,
     phone: '837-555-0100',
     accountOwner: 'http://salesforce.com/fake/url/jane-doe',
     accountOwnerName: 'John Doe',
     billingCity: 'San Francisco, CA',
     _children: [
         {
             name: '123556-A',
             accountName: 'Acme Corporation (Bay Area)',
             employees: 3000,
             phone: '837-555-0100',
             accountOwner: 'http://salesforce.com/fake/url/jane-doe',
             accountOwnerName: 'John Doe',
             billingCity: 'New York, NY',
             _children: [],
         },

         {
             name: '123556-B',
             accountName: 'Acme Corporation (East)',
             employees: 430,
             phone: '837-555-0100',
             accountOwner: 'http://salesforce.com/fake/url/jane-doe',
             accountOwnerName: 'John Doe',
             billingCity: 'San Francisco, CA',
             _children: [
                 {
                     name: '123556-B-A',
                     accountName: 'Acme Corporation (NY)',
                     employees: 1210,
                     phone: '837-555-0100',
                     accountOwner: 'http://salesforce.com/fake/url/jane-doe',
                     accountOwnerName: 'Jane Doe',
                     billingCity: 'New York, NY',
                 },
                 {
                     name: '123556-B-B',
                     accountName: 'Acme Corporation (VA)',
                     employees: 410,
                     phone: '837-555-0100',
                     accountOwner: 'http://salesforce.com/fake/url/jane-doe',
                     accountOwnerName: 'John Doe',
                     billingCity: 'New York, NY',
                     _children: [],
                 },
             ],
         },
     ],
 },

 {
     name: '123557',
     accountName: 'Rhode Enterprises',
     employees: 6000,
     phone: '837-555-0100',
     accountOwner: 'http://salesforce.com/fake/url/jane-doe',
     accountOwnerName: 'John Doe',
     billingCity: 'New York, NY',
     _children: [
         {
             name: '123557-A',
             accountName: 'Rhode Enterprises (UCA)',
             employees: 2540,
             phone: '837-555-0100',
             accountOwner: 'http://salesforce.com/fake/url/jane-doe',
             accountOwnerName: 'John Doe',
             billingCity: 'New York, NY',
         },
     ],
 },

 {
     name: '123558',
     accountName: 'Tech Labs',
     employees: 1856,
     phone: '837-555-0100',
     accountOwner: 'http://salesforce.com/fake/url/jane-doe',
     accountOwnerName: 'John Doe',
     billingCity: 'New York, NY',
     _children: [
         {
             name: '123558-A',
             accountName: 'Opportunity Resources Inc',
             employees: 1934,
             phone: '837-555-0100',
             accountOwner: 'http://salesforce.com/fake/url/jane-doe',
             accountOwnerName: 'John Doe',
             billingCity: 'Los Angeles, CA',
         },
     ],
 },

];`

Step 4:- Create Lightning Web Component : lwcTreeGrid.css

` .lgc-bg { background-color: rgb(242, 242, 242); }

.lgc-bg-inverse { background-color: rgb(22, 50, 92); }`

Step 5:- Create Lightning Web Component : lwcTreeGrid.js-meta.xml

` <?xml version="1.0" encoding="UTF-8"?>

45.0 true lightning__AppPage lightning__RecordPage lightning__HomePage ` **[→ Get source code live demo link:-](https://www.w3web.net/tree-grid-dynamic-expand-collapse-in-lwc/)**