1. Home
  2. Forum
  3. React - EJ 2
  4. Hierarchy is Incorrect and Expand icons not shown

Hierarchy is Incorrect and Expand icons not shown

I have a treegrid using local self referencing data but the hierarchy is incorrect and the expand/collapse buttons are not shown.

Here is the result:

Image_1869_1732573730335

Here is the code I am using:

import { useEffect, useState } from "react";
import { useData } from "../contexts/DataContext";
import { ColumnDirective, ColumnsDirective, TreeGridComponent, PageSettingsModel, EditSettingsModel, Edit, Page, Inject, Toolbar } from "@syncfusion/ej2-react-treegrid";
import { Paper } from "@mui/material";
import { getObject } from "@syncfusion/ej2-react-grids";

type EstimateParams = {
    handleHoursChange: () => void;
}

export default function Estimate({ handleHoursChange }: EstimateParams) {
    const { service, estimate, setEstimate } = useData()!;
    const pageSettings: PageSettingsModel = { pageSize: 100, pageSizeMode: 'Root' };
    const editSettings: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Row' };
    const toolbarSettings: any = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];

    const selectedTemplate = (props: object) => {
        if (getObject('isSelected', props) === true) {
            return (<div className="selected-template"><input type="checkbox" defaultChecked /></div>);
        } else {
            return (<div className="selected-template"><input type="checkbox" /></div>);
        }
    };
    return (
        <Paper>
            <TreeGridComponent dataSource={estimate?.tasks} treeColumnIndex={2} hasChildMapping='isParent' idMapping='taskId' toolbar={toolbarSettings} parentIdMapping='parentTaskId' allowPaging={false} pageSettings={pageSettings} editSettings={editSettings} allowSorting={false} width='100%'>
                <Inject services={[Edit, Page, Toolbar]} />
                <ColumnsDirective>
                    <ColumnDirective field='taskId' headerText='ID' width='60' isPrimaryKey={true} type="number" />
                    <ColumnDirective field='parentTaskId' headerText='P ID' width='100' type="number" />
                    <ColumnDirective field='taskName' headerText='Task' width='100%' />
                    <ColumnDirective field='architectHours' headerText='H1' width='100' textAlign='Right' editType="numericedit" type="number" />
                    <ColumnDirective field='engineerHours' headerText='H2' width='100' textAlign='Right' editType="numericedit" type="number" />
                    <ColumnDirective field='pmHours' headerText='H3' width='100' textAlign='Right' editType="numericedit" type="number" />
                    <ColumnDirective headerText='' width='80' type="boolean" template={selectedTemplate} textAlign="Center" />
                </ColumnsDirective>
            </TreeGridComponent>
        </Paper>
    );
}

I also have the imports in my css file:

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-react-grids/styles/material.css';
@import '../node_modules/@syncfusion/ej2-react-treegrid/styles/material.css';

and I've added more than I think I need for the npm packages:

{
  "name": "test.client",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.15.15",
    "@mui/material": "^5.14.19",
    "@mui/system": "^5.15.15",
    "@mui/x-data-grid": "^7.3.0",
    "@mui/x-date-pickers": "^7.3.1",
    "@syncfusion/ej2-react-barcode-generator": "^27.2.3",
    "@syncfusion/ej2-react-base": "^27.2.2",
    "@syncfusion/ej2-react-buttons": "^27.2.2",
    "@syncfusion/ej2-react-calendars": "^27.2.3",
    "@syncfusion/ej2-react-charts": "^27.2.3",
    "@syncfusion/ej2-react-circulargauge": "^27.2.2",
    "@syncfusion/ej2-react-diagrams": "^27.2.3",
    "@syncfusion/ej2-react-documenteditor": "^27.2.3",
    "@syncfusion/ej2-react-dropdowns": "^27.2.3",
    "@syncfusion/ej2-react-filemanager": "^27.2.3",
    "@syncfusion/ej2-react-gantt": "^27.2.3",
    "@syncfusion/ej2-react-grids": "^27.2.3",
    "@syncfusion/ej2-react-heatmap": "^27.2.2",
    "@syncfusion/ej2-react-inplace-editor": "^27.2.2",
    "@syncfusion/ej2-react-inputs": "^27.2.2",
    "@syncfusion/ej2-react-layouts": "^27.2.3",
    "@syncfusion/ej2-react-lineargauge": "^27.2.2",
    "@syncfusion/ej2-react-lists": "^27.2.3",
    "@syncfusion/ej2-react-maps": "^27.2.2",
    "@syncfusion/ej2-react-navigations": "^27.2.3",
    "@syncfusion/ej2-react-notifications": "^27.2.2",
    "@syncfusion/ej2-react-pdfviewer": "^27.2.3",
    "@syncfusion/ej2-react-pivotview": "^27.2.3",
    "@syncfusion/ej2-react-popups": "^27.2.2",
    "@syncfusion/ej2-react-querybuilder": "^27.2.3",
    "@syncfusion/ej2-react-richtexteditor": "^27.2.3",
    "@syncfusion/ej2-react-schedule": "^27.2.3",
    "@syncfusion/ej2-react-splitbuttons": "^27.2.2",
    "@syncfusion/ej2-react-spreadsheet": "^27.2.3",
    "@syncfusion/ej2-react-treegrid": "^27.2.3",
    "@syncfusion/ej2-react-treemap": "^27.2.2",
    "@syncfusion/ej2-barcode-generator": "^27.2.3",
    "@syncfusion/ej2-base": "^27.2.2",
    "@syncfusion/ej2-buttons": "^27.2.2",
    "@syncfusion/ej2-calendars": "^27.2.3",
    "@syncfusion/ej2-charts": "^27.2.3",
    "@syncfusion/ej2-circulargauge": "^27.2.2",
    "@syncfusion/ej2-diagrams": "^27.2.3",
    "@syncfusion/ej2-documenteditor": "^27.2.3",
    "@syncfusion/ej2-dropdowns": "^27.2.3",
    "@syncfusion/ej2-filemanager": "^27.2.3",
    "@syncfusion/ej2-gantt": "^27.2.3",
    "@syncfusion/ej2-grids": "^27.2.3",
    "@syncfusion/ej2-heatmap": "^27.2.2",
    "@syncfusion/ej2-inplace-editor": "^27.2.2",
    "@syncfusion/ej2-inputs": "^27.2.2",
    "@syncfusion/ej2-layouts": "^27.2.3",
    "@syncfusion/ej2-lineargauge": "^27.2.2",
    "@syncfusion/ej2-lists": "^27.2.3",
    "@syncfusion/ej2-maps": "^27.2.2",
    "@syncfusion/ej2-navigations": "^27.2.3",
    "@syncfusion/ej2-notifications": "^27.2.2",
    "@syncfusion/ej2-pdfviewer": "^27.2.3",
    "@syncfusion/ej2-pivotview": "^27.2.3",
    "@syncfusion/ej2-popups": "^27.2.2",
    "@syncfusion/ej2-querybuilder": "^27.2.3",
    "@syncfusion/ej2-richtexteditor": "^27.2.3",
    "@syncfusion/ej2-schedule": "^27.2.3",
    "@syncfusion/ej2-splitbuttons": "^27.2.2",
    "@syncfusion/ej2-spreadsheet": "^27.2.3",
    "@syncfusion/ej2-treegrid": "^27.2.3",
    "@syncfusion/ej2-treemap": "^27.2.2",
    "axios": "^1.6.2",
    "dayjs": "^1.11.11",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-promise-tracker": "^2.1.1",
    "react-router-dom": "^6.22.3",
    "uuid": "^9.0.1"
  },
  "peerDependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.47",
    "@types/react-dom": "^18.2.18",
    "@types/uuid": "^9.0.8",
    "@typescript-eslint/eslint-plugin": "^6.14.0",
    "@typescript-eslint/parser": "^6.14.0",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.55.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "typescript": "^5.2.2",
    "vite": "^5.0.8"
  }
}

I have tried adjusting several options without success.  What am I missing?

Thanks in advance.


3 Replies
SM Shek Mohammed Asiq Abdul Jabbar Syncfusion Team November 27, 2024 03:37 PM UTC

Hi Robert van de Sande,


Greetings from Syncfusion support.


We attempted to replicate the issue using the shared code snippet and themes, but we could not reproduce the problem on our end. Please refer to the following StackBlitz sample for reference.

https://stackblitz.com/edit/react-ebjhza?file=App.js,App.css


We suspect that the TreeGrid theme might not be applied correctly, which could cause the chevron icon (expand/collapse buttons) to not render properly. To address this, ensure the following CSS import is included in your project:


@import '../node_modules/@syncfusion/ej2--treegrid/styles/material.css';


If the issue persists, we request you to provide additional details by inspecting the relevant DOM elements using the following steps:

  1. Inspect the cell containing Task 1 in the TreeGrid.
  2. Locate the e-treecolumn class inside the <td> element.
  3. Verify whether the icon is rendered within a <span> element. The DOM structure should resemble the following screenshot:

  1. Please share a similar screenshot of your DOM structure to help us validate the issue further.


Regards,

Shek


RV Robert van de Sande December 2, 2024 02:30 PM UTC

I tried the sample that you provided and the expand/collapse buttons are not displayed in Chrome or Edge.

I added the ej2-treegrid/styles css import but that didn't change anything.

Here is what the DOM looks like for the first item

Screenshot 2024-12-02 092605.png


SM Shek Mohammed Asiq Abdul Jabbar Syncfusion Team December 3, 2024 02:39 PM UTC

Hi Robert van de Sande,


We have reviewed the image you shared and identified that the expand/collapse icon’s span is not found, and the class name of the td seems to be incorrect. These icons and classes are dynamically rendered based on the hierarchical relationship of the data in the TreeGrid. To investigate this issue further, please share the DataSource along with its properties (such as IdMapping, ParentIdMapping, etc.) to validate and provide an appropriate solution.


Looking forward to your response.


Regards,

Shek


Loader.
Up arrow icon