1

I want to add plus(+) and minus(-) button/sign at every level of lightning tree to add or delete item at particular level, is there any way to do so?

2 Answers 2

4

lightning:tree does not support that type of feature. You would want to use a lightning:treeGrid instead, which allows you to do things like specifying an action column where you could add the menu items. The onrowaction handler is used to perform the necessary logic. I'm not going to write a full solution, which would take a significant amount of code, but it should be pretty clear if you check out the documentation.

1

This will help you get a button working in the grid data in the rowAction column. The button type will also cause the onrowaction event, so you can add a button column to do that too. Use the buttons name and row provided in the event data to take the appropriate action.

       <lightning-tree-grid
                columns={gridColumns}
                data={gridData}
                key-field="name"
                onrowaction={onrowaction}
            ></lightning-tree-grid>

and in your javascript file: in the grid data, define your rowActions as a column definition:

 get gridColumns() {
        return [
        {
                type: 'text',
                fieldName: 'id',
                label: '',
            },
                {
                type: 'action',
                fieldName: 'actions',
                label: 'Actions',
                typeAttributes: {
                    rowActions: [
                        {label: "Action A", name: 'actionNameA'},
                        {label: "Action B", name: 'actionNameB'},
                    ]
                }
            },
        ];
    }

And the on row action event handler

 onrowaction(event) {
        const actionName = event.detail.action.name;
        const clickedRowColumnContext = event.detail.row.fieldName;
        switch (actionName) {
            case 'actionNameA':
                break;
            case 'actionNameB':
        //etc.

More documentation at: https://developer.salesforce.com/docs/component-library/bundle/lightning-tree-grid/documentation

This example also helped me bridge the gap as well as the comment above linking the onrowaction event with the column rowAction. https://rajvakati.com/2018/11/13/lightningtreegrid-row-level-actions/

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.