4

I would like add functionality to the Lightning Tree Grid component.

Starting with a base component of:

import LightningTreeGrid from 'lightning/treeGrid';

export default class CustomTreeGrid extends LightningTreeGrid {}

And referencing the component as

<c-custom-tree-grid
    data={data}
    columns={columns}
    key-field="Id"
    expanded-rows={currentExpanded}
    onrowaction={handleRowAction}
    selected-rows={selectedRows}
    hide-checkbox-column="true"
></c-custom-tree-grid>

I would expect this to render a normal Tree Grid, but instead nothing is rendered at all. Walking through the component life cycle tells me that all the attributes are being correctly set, and the constructor on the actual LightningTreeGrid is being called properly.

The one oddity I noticed is that the rendered CustomTreeGrid javascript's template function is blank.

(function() {
    const {$A, aura, Sfdc, sforce} = {};

    return function (lwc, LightningTreeGrid) {

        function tmpl($api, $cmp, $slotset, $ctx) {
        return [];
        }

        var _tmpl = lwc.registerTemplate(tmpl);
        tmpl.stylesheets = [];
        tmpl.stylesheetTokens = {
        hostAttribute: "c-customTreeGrid_customTreeGrid-host",
        shadowAttribute: "c-customTreeGrid_customTreeGrid"
        };

        class CustomTreeGrid extends LightningTreeGrid {}

        var customTreeGrid = lwc.registerComponent(CustomTreeGrid, {
        tmpl: _tmpl
        });

        return customTreeGrid;

    }

}())

Here is a playground demonstrating the issue.

1
  • Hello @SethBoyd it seems that your playground is correct, I have working example in my project, where I extend RadioGroup, but it doesn't work in Playground. Did you try your option without .HTML file in real project?
    – ytiq
    Commented Jul 14, 2020 at 16:01

2 Answers 2

2

I am not a Javascript wizard but will try to answer what I noticed.

You are extending LightningTreeGrid as

export default class CustomTreeGrid extends LightningTreeGrid {}

This only extends the Javascript of LightningTreeGrid, but does not extends the markup. Now this means you can access all methods and attributes of LightningTreeGrid class in CustomTreeGrid .

Now in your LWC component CustomTreeGrid the html markup is blank, thus it does not know you intend to build a lightning-tree-grid . It only means you intend to use JS method from LightningTreeGrid

Solution: Add markup of lightning-tree-grid in CustomTreeGrid html.

CustomTreeGrid.html :

<template>
    <lightning-tree-grid                   
                columns={columns}
                data={data}               
                key-field={keyField}
            ></lightning-tree-grid>
</template>

CustomTreeGrid.js :

import LightningTreeGrid from 'lightning/treeGrid';
import { LightningElement, track, api } from 'lwc';

export default class CustomTreeGrid extends LightningTreeGrid {
    @api data;
    @api columns;
    @api keyField;

}

Playground Link : https://developer.salesforce.com/docs/component-library/tools/playground/Dulcc42an/3/edit

4
  • I took the syntax from the Create Custom Data Types section of the [Data Table documentation] (developer.salesforce.com/docs/component-library/bundle/…) which correctly renders a Datatable even without an html template. This method will not give me access to the table contained in the Tree Grid component, which is what I need.
    – SethBoyd
    Commented May 7, 2019 at 15:48
  • @SethBoyd I tried but couldnt do it, can you provide playground example? Commented May 7, 2019 at 15:59
  • Sure. Here is an example: developer.salesforce.com/docs/component-library/tools/…
    – SethBoyd
    Commented May 7, 2019 at 19:02
  • Also got this working - but unfortunately all related handlers need to be taken with the custom type as well... kinda painful. Commented Oct 31, 2021 at 14:48
1

As per the documentation https://developer.salesforce.com/docs/component-library/bundle/lightning:treeGrid/documentation, I can't see if lightning has exported treeGrid likewise LightningDataTable. Thanks

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .