Need Help with a custom plugin I'm making. (Accordion)

[AndrewR3K]

Hi! First off, I just want to say that I love RevoGrid so far and hope to continue to use it. So wonderful job devs!

Now into what I am trying to solve.

Goal

I want to be able to click on a cell and have an accordion style drop down with extra information bellow the row itself.

The Issue

The issue I am running into, is when appending the HTML content, for some reason it appends it to multiple elements (usually at a seemingly consistent distance from one another, and requires scrolling to see), even though when logging out the class dom it only shows 1 instance. I assume this might have something to do with the virtual scrolling, but im honestly at a complete loss here.

Example:

What I have done so far

I have created a custom plugin to handle this functionality that I am trying to achieve. But I am running into some errors that I have no clue how to resolve at the moment and would love some advice/feedback from the community.

Thank you all in advance!

Tech Stack

Nuxt 3

Plugin Code

class AccordionPlugin extends BasePlugin {
    priorIndex: number | null;
    initialHeight: any;

    constructor(revogrid: HTMLRevoGridElement, providers: PluginProviders) {
        super(revogrid, providers);

        this.priorIndex = null
        this.initialHeight = 0

        this.addEventListener('beforecellfocus', this.handleCellClick);
    }

    // private setVisibility = (cssClass: string, state: string) => {
    //     let revClass = this.revogrid.querySelectorAll(cssClass);
    //     revClass.forEach(element => {
    //         // @ts-ignore
    //         element.style.visibility = state;
    //     });
    // }

    private handleCellClick = (e: CustomEvent) => {
        const rowIndex = e.detail.rowIndex;

        // if (this.priorIndex !== rowIndex) {
        //     this.setVisibility('.selection-border-range', 'visible')
        //     this.setVisibility('.autofill-handle', 'visible')
        // } else {
        //     this.setVisibility('.selection-border-range', 'hidden')
        //     this.setVisibility('.autofill-handle', 'hidden')
        // }

        if (!e?.detail?.column?.accordionTemplate) {
            return
        }

        nextTick(() => {
            // Cleanup Old Content
            const accordions = document.querySelectorAll('.accordion-content');
            console.log('accordions', accordions.length)


            const accordion = document.querySelector('.accordion-content');
            if (accordion) {
                accordion.remove();
            }

            const rows = document.querySelectorAll('.rgRow');
            console.log('length: ', rows.length)

            for (const key in rows) {
                if (Object.prototype.hasOwnProperty.call(rows, key)) {
                    const row = rows[key];
                    if (rowIndex == Number(row.ariaRowIndex)) {
                        const grid = document.querySelector('revo-grid');
                        console.log(rowIndex, Number(row.ariaRowIndex), row)

                        // Create Content
                        const accordionContent = document.createElement('div');
                        accordionContent.className = 'accordion-content';

                        accordionContent.innerHTML = e.detail.column.accordionTemplate({
                            model: e.detail.model,
                            prop: e.detail.prop
                        });

                        // Prevent the action of clicking on the accordion content from triggering a true cell click.
                        accordionContent.addEventListener('click', (event) => {
                            event.stopPropagation();

                            if (e.detail.column.accordionClickCallback) e.detail.column.accordionClickCallback(event)
                        });


                        // TODO: Figure out why this doesnt work once you scroll. 1. this is appending to multiple classes even though this for loop iterated 1 time. 2. if you scroll far then click, the first one will be pushed into the wrong element/row.
                        row.append(accordionContent);

                        // @ts-ignore
                        if (this.initialHeight == 0) this.initialHeight = row.offsetHeight
                        rowHeight.value = this.initialHeight

                        // @ts-ignore
                        grid.rowDefinitions = [{ type: 'rgRow', index: rowIndex, size: row.querySelector('.accordion-content')?.offsetHeight + this.initialHeight }];

                        this.priorIndex = rowIndex

                        break
                    }
                }
            }
        })

    }
}

Columns code

{
        name: '',
        readonly: true,
        size: 30,
        rowDrag: false,
        filter: false,
        sortable: false,
        accordionSize: 80,
        accordionTemplate: ({ model, prop }: { model: any; prop: any }) => {
            return `<p>Additional details for row ${model.id}</p>`
        },
        cellTemplate: (h: Function, { model, prop }: { model: any; prop: any }) => {
            return h('strong', {
                style: {
                    'cursor': 'pointer'
                }
            }, '>')
        }
    },
    {
        name: 'ID',
        prop: 'id',
        sortable: true,
        readonly: true,
        size: 130,
        cellTemplate: (h: Function, { model, prop }: { model: any; prop: any }) => {
            return h('strong', {
                style: {
                    'cursor': 'pointer'
                },
                class: {
                    'job-id-hover': true
                }
            }, model[prop])
        },
    },

[AndrewR3K]

I tried to simplify drastically to see if maybe it was something silly I was doing, and sadly I'm still having the same issues when taking the following approach instead of a plugin.

cellProperties: ({ model }: { model: any }) => {
            return {
                onClick: (e: any) => {
                    const accordion = document.querySelector('.accordion-content');
                    if (accordion) {
                        accordion.remove();
                    }

                    // Create Content
                    const accordionContent = document.createElement('div');
                    accordionContent.className = 'accordion-content';
                    accordionContent.innerHTML = '<div>Extra Details to view</div>'
                    e.target.append(accordionContent);
                }
            };
        },

[m2a2x]

Hi @AndrewR3K this will not work
document.querySelector('.accordion-content')

if element you are looking for is inside of given cell (and you know for sure it's there) you need to check for it, in your case logic is:
every cell in all column will receive this element.

Correct approach would be to make it on data level, you need to provide data source expanded and collapsed based on it. I believe RevoGrid Pro has a plugin for such case called Tree Data View

Also you can get similar function with grouping, so you would have to prepare your data in a such way that grouped rows will have prop from parent

[AndrewR3K]

Thanks for the reply!

So what I am trying to do is actually a bit different than the Tree Data View. What I'm really trying to do is to show different (but related) content to a given row.

Example: I click a row with an id, name, date. And if I click on the ID or row, it should drop down with additional data (example last updated date, description, etc). You can see in my screenshot above that I click on a ^ and it then should dropdown (basically create a new row/div) with additional data)

It looks like the Tree Data view is more for nested data that has the same format as the parent.

Any ideas on how I could achieve this? I have gotten pretty close with my examples above, but the issue is getting it to only insert the div under the row I clicked. Right now it inserts it under the row. but will insert it every X record :/