1. Home
  2. Forum
  3. React - EJ 2
  4. Multiple treegrids on the same page

Multiple treegrids on the same page

Hi,

I am new to Syncfusion and having some trouble with React TreeGrid.

For state management, I am using mobx-state-tree (MST). I am pulling some data from an API using MST and I'm not the Syncfusion data manager (to my knowledge).

If I display a single TreeGrid it looks fine. For example:
  • One TreeGrid on a single page using data E01 (Fine)
  • One TreeGrid on a single page using data E02 with different headers than E01 (Fine)
  • One TreeGrid using data E01 and one TreeGrid using data E02 on a single grid (Not fine)
Like I said, I am new so I am probably doing something silly / naive. The problem is that both TreeGrids end up having the same columns even though the two data sets have different columns. It is like the TreeGrid is trying to merge the data sets somehow.

If it matters, I am not yet using ColumnsDirectives.

Any ideas? Thank you very much.

Best regards,
Eric

3 Replies
EF Eric Forgy May 15, 2020 07:44 AM UTC

Here is a MWE:

import React from "react";
import { TreeGridComponent } from "@syncfusion/ej2-react-treegrid";

const E01 = [
    {
        A: 1, B: 2, children: [
            { A: 3, B: 4 },
            { A: 5, B: 6 }
        ]
    }
]

const E02 = [
    {
        C: 1, D: 2, children: [
            { C: 3, D: 4 },
            { C: 5, D: 6 }
        ]
    }
]

const MyTreeGrid = () => {
    return (
        <>
            <h1>E01</h1>
            <TreeGridComponent
                dataSource={E01}
                childMapping="children"
            />
            <h1>E02</h1>
            <TreeGridComponent
                dataSource={E02}
                childMapping="children"
            />
        </>)
};


If I comment out the second TreeGrid, it is fine:




If I comment out the first TreeGrid, it is fine:



If I try to display both, they seem to interfere with each other and the second TreeGrid does not display properly:



EF Eric Forgy May 15, 2020 05:47 PM UTC

Looking at this


It appears that it should be possible to have two TreeGrids on the same page, but I need to distinguish them with separate ids. I don't (yet) see a way to specify an id for a React TreeGridComponent. Any ideas? 🙏

MP Manivannan Padmanaban Syncfusion Team May 18, 2020 09:25 AM UTC

 Hi Eric, 
 
Greetings from Syncfusion Support. 
 
We are able to reproduce the reported issue at our end, when the columns are not defined (i.e. if the columns are autogenerated). On further validating, we have confirmed this as bug and logged a defect report for the same. Fix for the issue will be included in our next week patch release, which is expected to be rolled out on or before May 27, 2020.  
 
You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.    
 
Note: To view the above feedback, kindly login into your account.   
 
Until then, we suggest you to define the columns as like below. 
 
 
render() { 
        return ( 
            <> 
                <h1>E01</h1> 
                <TreeGridComponent 
                    dataSource={E01} 
                    childMapping="children"> 
                    <ColumnsDirective> 
                        <ColumnDirective field='A' width='100' /> 
                        <ColumnDirective field='B' width='100' /> 
                    </ColumnsDirective> 
                </TreeGridComponent> 
                <h1>E02</h1> 
                <TreeGridComponent 
                    dataSource={E02} 
                    childMapping="children"> 
                    <ColumnsDirective> 
                        <ColumnDirective field='C' width='100' /> 
                        <ColumnDirective field='D' width='100' /> 
                    </ColumnsDirective> 
                </TreeGridComponent> 
            </>) 
    } 
 
 
 
Refer to the below sample link, 
 
Regards, 
Manivannan Padmanaban 
 


Loader.
Up arrow icon