Our blazing fast Grid component built with pure JavaScript


Post by jinc »

Hello!

VERSION: 5.3.1

When the tree grid component is the only component on the tab flexipage and I drag a row and drop it on top of a leaf row, it makes the leaf row a parent and inserts the dragged row underneath it. However, when I try this same behavior on a record page that has more components, it behaves differently. When this tree grid is added under any component, it does not make the leaf row a parent but, inserts the dragged row after the leaf row.

This is the configuration:

host.create('TreeGrid', {
                tree: true,
                columns: [
                    {
                        text: 'Name',
                        field: 'name',
                        flex: 1,
                        type: 'tree',
                    },
                ],
                store: {
                    tree: true,
                    readUrl: `@salesforce/resourceUrl/bryntumPreview/data/treeGrid.json`,
                    autoLoad: true,
                },
                selectionMode: {
                    row: true,
                    checkbox: true,
                },
                features: {
                    rowReorder: { dropOnLeaf: true },
                },
            });

When I checked content.valid value as I hover over leaf row it keeps stating it is valid but, the context validity seems to be determining only for the before and after drop zones, not the current row drop zone.

Attachments
reorderRow.mov
(28.66 MiB) Downloaded 27 times

Post by alex.l »

Hello,

Could you please provide full code of the page to reproduce this?
In our examples we use only one Grid component per page and it works good.
Please let us know if you have LWS enabled.

All the best,
Alex


Post by jinc »

Hi Alex,

Here is the metadata to the flexipage setup. If you add a tree grid on under any of the standard Salesforce component then, you should see the issue. If the grid component is alone on the flexipage then, it works just fine. It is when there are other components above it that the grid's drag drop behavior acts wonky and dropOnLeaf feature does not work correctly. Moreover, LWS has been enabled on the org.

<?xml version="1.0" encoding="UTF-8"?>
<FlexiPage xmlns="http://soap.sforce.com/2006/04/metadata">
    <flexiPageRegions>
        <mode>Replace</mode>
        <name>header</name>
        <type>Region</type>
    </flexiPageRegions>
    <flexiPageRegions>
        <itemInstances>
            <componentInstance>
                <componentName>force:detailPanel</componentName>
                <identifier>force_detailPanel</identifier>
            </componentInstance>
        </itemInstances>
        <itemInstances>
            <componentInstance>
                <componentName>treeGridPreview</componentName>
                <identifier>c_treeGridPreview</identifier>
            </componentInstance>
        </itemInstances>
        <mode>Replace</mode>
        <name>main</name>
        <type>Region</type>
    </flexiPageRegions>
    <flexiPageRegions>
        <itemInstances>
            <componentInstance>
                <componentName>forceChatter:recordFeedContainer</componentName>
                <identifier>forceChatter_recordFeedContainer</identifier>
            </componentInstance>
        </itemInstances>
        <mode>Replace</mode>
        <name>sidebar</name>
        <type>Region</type>
    </flexiPageRegions>
    <masterLabel>Account Record Page</masterLabel>
    <parentFlexiPage>sfa__Account_rec_L</parentFlexiPage>
    <sobjectType>Account</sobjectType>
    <template>
        <name>flexipage:recordHomeTemplateDesktop</name>
    </template>
    <type>RecordPage</type>
</FlexiPage>

Post by alex.l »

Hi Jinc,

Thank you for extra information provided.
Do you have opportunity to test the same thing with version 5.2.7? Also please try the same with LWS disabled. We have some bugs with LWS enabled in last versions, this very possible is relative to them.

All the best,
Alex


Post by jinc »

Hi Alex,

Thank you for the suggestion. I have tested on version 5.2.7 with and without LWS enabled and the issue still persists.


Post by alex.l »

Thanks for checking that!
I tried to use the code you provided to make the app working, but I cannot. I need more info from you, we didn't use flexipage before in our demos.
What is host in your code and how to render grid into flexipage container?
Please provide full code with imports that I can use to run the app. Check our salesforce demo in examples/salesforce folder, try to apply minimal changes to make it working with flexipage?
It will allow us to go forward faster.
Thank you!

All the best,
Alex


Post by jinc »

Hi Alex,

In order to view the tree grid component on a flexipage, you would:

  1. Ensure the component is exposed to a record page via the component meta.xml file
    <?xml version="1.0" encoding="UTF-8"?>
    <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    	<apiVersion>53.0</apiVersion>
    	<isExposed>true</isExposed>
    	<masterLabel>Tree Grid</masterLabel>
    	<targets>
    		<target>lightning__Tab</target>
    		<target>lightning__RecordPage</target>
    	</targets>
    </LightningComponentBundle>
  2. Open org and go to SObject record page
  3. Click on gear icon and select edit page
  4. Drag and drop the tree grid component under all the components
  5. Save and view the record page

I have tested out the demo code but, it still having the same issue. If this tree grid is underneath any component the issue occurs.

Here is the code: (host is an instance variable that allows us to create the TreeGrid class instance) it behaves the same as new TreeGrid() call

import { LightningElement } from 'lwc';

export default class TreeGridPreview extends LightningElement {
    grdId = null;

    handleWidgetReady({ target }) {
        this.createTreeGrid(target);
    }

    createTreeGrid(host) {
        try {
            // Instantiate tree grid with minimal config
            this.grdId = host.create('TreeGrid', {
                tree: true,
                columns: [
                    {
                        text: 'Name',
                        field: 'name',
                        flex: 1,
                        type: 'tree',
                    },
                    {
                        text: 'Percent',
                        field: 'percent',
                        width: 200,
                        type: 'percent',
                    },
                    {
                        text: 'City',
                        field: 'city',
                        width: 200,
                        editor: {
                            type: 'dropdown',
                            items: [
                                'Stockholm',
                                'Moscow',
                                'Paris',
                                'Washington',
                                'San Francisco',
                                'New York',
                                'Barcelona',
                                'Dubai',
                            ],
                        },
                    },
                ],
                store: {
                    tree: true,
                    data: [
                        {
                            id: 1,
                            title: 'Row 0',
                            name: 'Don A Taylor',
                            city: 'Moscow',
                            percent: 13,
                            done: false,
                            relatedTo: 3,
                        },
                        {
                            id: 2,
                            title: 'Row 1',
                            name: 'Jane B Scott',
                            city: 'Stockholm',
                            percent: 81,
                            done: false,
                            relatedTo: 4,
                        },
                        {
                            id: 3,
                            title: 'Row 2',
                            name: 'Mike C Ewans',
                            city: 'Moscow',
                            percent: 11,
                            done: false,
                            relatedTo: 2,
                        },
                        {
                            id: 4,
                            title: 'Row 3',
                            name: 'Mary D Davis',
                            city: 'San Francisco',
                            percent: 51,
                            done: false,
                            relatedTo: 1,
                        },
                        {
                            id: 5,
                            title: 'Row 4',
                            name: 'Linda E Taylor',
                            percent: 59,
                            done: true,
                            relatedTo: 6,
                        },
                        {
                            id: 6,
                            title: 'Row 5',
                            name: 'Don F Miller',
                            percent: 49,
                            done: true,
                            relatedTo: 2,
                        },
                    ],
                },
                features: {
                    rowReorder: {
                        dropOnLeaf: true,
                    },
                },
            });
        } catch (e) {
            this.error = e.message;
        }
    }
}

Post by Maxim Gorkovsky »

Hello.
I reproduced this problem, ticket opened here: https://github.com/bryntum/support/issues/6507 Thank you for report


Post by Maxim Gorkovsky »

Issue is resolved and fil will be available in 5.3.2


Post Reply