The Save and Delete buttons are not working in the tree grid editor.

[ShakkirMv]

I have a master table called Fs and a grid editor named FsLines inside it. In FsLines, I have a parent_line_id, and I need to display it in a tree model.

I have already implemented the tree model successfully, and when I open the dialog, it displays the values correctly. However, the edit and delete buttons are not working—clickable actions are not functioning properly.

import { FSForm, FSLinesRow, FSRow, FSService } from '@/ServerTypes/Transactions';
import { Decorators, EntityDialog, createEntityDialog } from '@serenity-is/corelib';
import { FSLinesDialog } from '@/Transactions/FSLines/FSLinesDialog';
import { Grid } from '@serenity-is/sleekgrid';

@Decorators.registerClass('KHCB.Transactions.FSDialog')
export class FSDialog extends EntityDialog<FSRow, any> {
protected getFormKey() { return FSForm.formKey; }
protected getRowDefinition() { return FSRow; }
protected getService() { return FSService.baseUrl; }
protected form = new FSForm(this.idPrefix);

constructor() {
    super();
    window.addEventListener("refreshTree", () => this.addCustomHtml());
}

protected afterLoadEntity() {
    super.afterLoadEntity();
    var grid = this.form.FSLines.getGrid();
    var x = this.element.findAll('.s-KHCB-Transactions-FSLinesEditor')[0];
    x.getElementsByClassName("grid-container")[0].style.display = "none";

    let customHtml = `<ul id="treeView" class="tree"></ul>`;
    let htmlNode = document.createRange().createContextualFragment(customHtml);
    x.append(htmlNode);

    this.addCustomHtml();

    (this.form.FSLines.view as any).onDataChanged.subscribe(() => {
        this.addCustomHtml();
    });

    (this.form.FSLines.view as any).onRowCountChanged.subscribe(() => {
        this.addCustomHtml();
    });
    //let detailEditor = this.form.FSLines;
    //let firstRow = detailEditor.getItems()[0];
    //if (firstRow) {
    //    detailEditor.editItem(firstRow);
    //}
    //var id = entityOrId;
   

}

private addCustomHtml() {
 
    function buildTree(flatData: FSLinesRow[]) {
        let rootNodes = [];

        flatData.filter(i => (i.ParentLineId || null) == null).forEach(item => {
            var children = flatData.filter(i => (i.ParentLineId || 0) == item.LineId);
            var node = { LineId: item.LineId, LineDesc: item.LineDesc, children: [], SortOrder: item.SortOrder };
            node.children = children;
            rootNodes.push(node);
        });

        return rootNodes;
    }

    const treeData = buildTree(this.form.FSLines.getItems());
    var detailEditor = this.form.FSLines;

    function createTree(container, data, detailEditor) {
       
        const ul = document.createElement("ul");
        ul.className = "tree";

        data.forEach(item => {
            const li = document.createElement("li");
            li.className = "tree-item";

            const textSpan = document.createElement("span");
            textSpan.textContent = `${item.SortOrder || ''} - `;

            const lineDescLink = document.createElement("a");
            lineDescLink.href = "#";
            lineDescLink.textContent = item.LineDesc || 'No Description';
            lineDescLink.className = "tree-link";

            lineDescLink.addEventListener("click", function (event) {
                event.stopPropagation();
                event.preventDefault();
              // k.
                let fsLineDialog = new FSLinesDialog();
                fsLineDialog.loadEntityAndOpenDialog(item);
            });

            li.appendChild(textSpan);
            li.appendChild(lineDescLink);
            li.appendChild(document.createTextNode(` - ${item.LineId || 'NEW'}`));

            if ((item.children || []).length > 0) {
                const subTree = createTree(li, item.children, detailEditor);
                subTree.classList.add("hidden");

                li.addEventListener("click", function (event) {
                    event.stopPropagation();
                    subTree.classList.toggle("hidden");
                });

                li.appendChild(subTree);
            } else {
                li.classList.add("leaf");
            }

            ul.appendChild(li);
        });

        return ul;
    }

    let treeView = document.getElementById("treeView");
    if (treeView) {
        treeView.innerHTML = "";
    }

    document.getElementById("treeView").appendChild(createTree(document.body, treeData, detailEditor));

    this.applyTreeStyles();
}

private applyTreeStyles() {
    const style = document.createElement("style");
    style.innerHTML = `
        .tree {
            list-style-type: none;
            padding-left: 20px;
            font-family: Arial, sans-serif;
        }
        .tree-item {
            margin: 5px 0;
            padding: 5px;
            border-radius: 5px;
            transition: background 0.3s;
        }
        .tree-item:hover {
            background: #f0f8ff;
        }
        .tree-link {
            text-decoration: none;
            color: #007bff;
            font-weight: bold;
            cursor: pointer;
            transition: color 0.3s;
        }
        .tree-link:hover {
            color: #0056b3;
        }
        .tree .hidden {
            display: none;
        }
        .tree .leaf {
            color: #6c757d;
        }
    `;
    document.head.appendChild(style);
}

}