I can't get treegrid to work :(

[Maryam Saleh]

Hi

I'm new to all this, so I'm not familiar with Typescript but all those sample codes

are in Typescript.

I tried to follow the video for building a sample app using Treegrid, but was not

able to get it render child nodes properly.

Here is the code :

import React from "react";

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

// import DataSource from "./dataSource";

import './App.css';

const App = () =>{

    const dataSource = [

        {

            projectId: 1,

            projectTitle: 'Project 1',

            projectDesc: 'This is project 1',

            activities: [

                {

                    activityId: 1,

                    activityTitle: 'Activity1',

                    activityType: 'Daily',

                    activityLength: 5,

                    activityStartDate: '1401/05/20',

                    activityFinishDate: '1401/07/15',

                    activityProgress: '25%',

                    prevActivity: '',

                    activityResource: true,

                    activityCost: '1,400,00',

                    activityFloorLength: 4,

                    activityFloorDate: '1401/07/01',

                    activityFloorCost: '700,000',

                    activityAverageLength: 3,

                    activityAverageDate: '1400/07/05',

                    activityAverageCost: '900,000',

                    activityCeilingLength: 6,

                    activityCeilingDate: '1400/07/20',

                    activityCeilingCost: '1,600,000'

                },

                {

                    activityId: 2,

                    activityTitle: 'Activity2',

                    activityType: 'Daily',

                    activityLength: 7,

                    activityStartDate: '1401/06/20',

                    activityFinishDate: '1401/09/15',

                    activityProgress: '35%',

                    prevActivity: '1',

                    activityResource: true,

                    activityCost: '1,500,00',

                    activityFloorLength: 5,

                    activityFloorDate: '1401/08/25',

                    activityFloorCost: '1,700,000',

                    activityAverageLength: 6,

                    activityAverageDate: '1400/09/01',

                    activityAverageCost: '1,200,000',

                    activityCeilingLength: 9,

                    activityCeilingDate: '1400/10/20',

                    activityCeilingCost: '2,600,000'

                }

            ]

        },

        {

            projectId: 2,

            projectTitle: 'Project 2',

            projectDesc: 'This is project 2',

            activities: [

                {

                    activityId: 5,

                    activityTitle: 'Activity5',

                    activityType: 'Daily',

                    activityLength: 8,

                    activityStartDate: '1401/05/25',

                    activityFinishDate: '1401/10/15',

                    activityProgress: '55%',

                    prevActivity: '',

                    activityResource: true,

                    activityCost: '5,400,00',

                    activityFloorLength: 5,

                    activityFloorDate: '1401/09/25',

                    activityFloorCost: '1,700,000',

                    activityAverageLength: 6,

                    activityAverageDate: '1400/10/01',

                    activityAverageCost: '2,900,000',

                    activityCeilingLength: 9,

                    activityCeilingDate: '1400/11/01',

                    activityCeilingCost: '6,600,000'

                },

                {

                    activityId: 6,

                    activityTitle: 'Activity6',

                    activityType: 'Daily',

                    activityLength: 9,

                    activityStartDate: '1401/07/20',

                    activityFinishDate: '1401/12/01',

                    activityProgress: '15%',

                    prevActivity: '5',

                    activityResource: false,

                    activityCost: '7,500,00',

                    activityFloorLength: 7,

                    activityFloorDate: '1401/11/25',

                    activityFloorCost: '4,700,000',

                    activityAverageLength: 6,

                    activityAverageDate: '1401/12/25',

                    activityAverageCost: '6,200,000',

                    activityCeilingLength: 12,

                    activityCeilingDate: '1402/01/20',

                    activityCeilingCost: '9,600,000'

                }

            ]

        },

        {

            projectId: 3,

            projectTitle: 'Project 3',

            projectDesc: 'This is project 3',

            activities: [

                {

                    activityId: 10,

                    activityTitle: 'Activity10',

                    activityType: 'Daily',

                    activityLength: 6,

                    activityStartDate: '1401/06/20',

                    activityFinishDate: '1401/09/15',

                    activityProgress: '0',

                    prevActivity: '',

                    activityResource: true,

                    activityCost: '4,400,00',

                    activityFloorLength: 4,

                    activityFloorDate: '1401/08/25',

                    activityFloorCost: '2,900,000',

                    activityAverageLength: 5,

                    activityAverageDate: '1401/08/30',

                    activityAverageCost: '3,500,000',

                    activityCeilingLength: 8,

                    activityCeilingDate: '1401/11/01',

                    activityCeilingCost: '6,600,000'

                },

                {

                    activityId: 12,

                    activityTitle: 'Activity12',

                    activityType: 'Daily',

                    activityLength: 7,

                    activityStartDate: '1401/07/05',

                    activityFinishDate: '1401/09/10',

                    activityProgress: '0',

                    prevActivity: '',

                    activityResource: true,

                    activityCost: '9,500,00',

                    activityFloorLength: 5,

                    activityFloorDate: '1401/10/30',

                    activityFloorCost: '6,700,000',

                    activityAverageLength: 6,

                    activityAverageDate: '1401/09/01',

                    activityAverageCost: '7,200,000',

                    activityCeilingLength: 9,

                    activityCeilingDate: '1401/12/15',

                    activityCeilingCost: '12,600,000'

                },

                {

                    activityId: 13,

                    activityTitle: 'Activity13',

                    activityType: 'Daily',

                    activityLength: 12,

                    activityStartDate: '1401/09/20',

                    activityFinishDate: '1402/03/01',

                    activityProgress: '0',

                    prevActivity: '12',

                    activityResource: false,

                    activityCost: '27,500,00',

                    activityFloorLength: 10,

                    activityFloorDate: '1402/01/25',

                    activityFloorCost: '22,700,000',

                    activityAverageLength: 11,

                    activityAverageDate: '1402/02/25',

                    activityAverageCost: '24,500,000',

                    activityCeilingLength: 14,

                    activityCeilingDate: '1402/04/20',

                    activityCeilingCost: '39,600,000'

                }

            ]

        }

    ];

    return (

        <TreeGridComponent

            dataSource={dataSource}

            childMapping={dataSource.activities}

            treeColumnIndex={1}

        >

        </TreeGridComponent>

    );

}

export default App;

[Robert]

Are you using react 18.2? You probably running into the same issue I have. Try react 17.0.2

[Maryam Saleh]

Hi

Thanks for your response.

The problem, in my case, was with the data structure.

both parent and child need to follow the same structure.