Cannot collapse grid section and sort grid section

[Thái Ph?m Qu?c]

I am new to syncfusion/ej2-react-gantt, i am facing an error related to collapse grid section. when i click on collapse parent the grid section side does not collapse, but the chart section side still collapses normally. That is the first problem, the second problem is i can not sort when clicking on column header. i have injected and allow everything needed. Here is my code:




import {Fragment} from "react"
import './index.css'
import { GanttComponent, TaskFieldsModel, Inject, Resize, Sort, Filter, ColumnMenu, ColumnsDirective, ColumnDirective, Edit, Toolbar, Selection, ContextMenu } from '@syncfusion/ej2-react-gantt'
import {projectData} from './fakeData'
// import { DropDownList } from '@syncfusion/ej2-dropdowns'
 

const Gantt = () => {
  const {innerHeight} = window


  const taskValues: TaskFieldsModel = {
    id: "TaskID",
    name: "TaskName",
    startDate: "StartDate",
    endDate: "EndDate",
    duration: "Duration",
    progress: "Progress",
    child: "subtasks",
    dependency: "Predeceesor",
    manual: 'isManual'
  }


  const splitterSettings = {
    position : '40%'
  }


  const editSettings = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true,
    allowTaskbarEditing: true
  }




  const labelSettings = {
    rightLabel:'${taskData.TaskName}',
    taskLabel: '${Progress}%'
  }


  return (
    <Fragment>
      {/* To change timeline view add timelineSettings={{timelineViewMode: "Day"} in below tag} */}
      <GanttComponent dataSource={projectData}
        taskFields={taskValues}


        allowResizing={true}
        height = {`${innerHeight - 120}px`}
        splitterSettings={splitterSettings}
        allowSelection={true}
        allowReordering={true}
        allowSorting={true}
        allowFiltering={true}
        showColumnMenu ={true}
        editSettings={editSettings}
        taskMode='Custom'


        labelSettings={labelSettings}
        enableContextMenu={true}
        autoCalculateDateScheduling={false}
      >


        <ColumnsDirective>
          <ColumnDirective field="TaskID" headerText="ID" width='150' maxWidth='200'></ColumnDirective>
          <ColumnDirective field="TaskName" headerText="Name"  width='250' maxWidth='400'></ColumnDirective>
          <ColumnDirective field="StartDate" format="dd-MMM-yy" width='150' maxWidth='200'></ColumnDirective>
          <ColumnDirective field="Duration" width='150' maxWidth='200'></ColumnDirective>
        </ColumnsDirective>
        <Inject services={[Sort, Filter, Resize, ColumnMenu, Edit, Toolbar, Selection, ContextMenu]} />
      </GanttComponent>
    </Fragment>


  )
}


export default Gantt

Below is the image which can not collapse on grid side:

[Sridharan Jayabalan]

Hi Thai,

 

Greetings from Syncfusion.

 

Query 1 - when I click on collapse parent the grid section side does not collapse, but the chart section side still collapses normally.

 

It appears that the issue with the grid section not collapsing may be due to a version mismatch between your Gantt source files and the CSS references. Please ensure that both source and CSS references are the same version (e.g., 27.1.58). Updating to matching versions should resolve this issue.

 

 

Query 2 - I cannot sort when clicking on column header.

 

Regarding the sorting functionality, we’ve validated this using your code snippets, and sorting via both column headers and the column chooser is functioning correctly on our end. To investigate further, share the below requested details.

1. Share us your Gantt Chart version.
2. Are you customizing anything with header template?
3. Are you overriding the default CSS with your custom CSS?
4. Are you missed any codes to share with us, please share them too.

Sample - Xcemhj (forked) - StackBlitz

 

Regards,

Sridharan

[Thái Ph?m Qu?c]

Hi Sridharan Jayabalan and Syncfusion team

I followed your instructions and fixed the collapse issue in the grid section, everything is working. But I still can't fix the sort issue, here is my Gantt version:

I also didn't change anything in the header template, and I don't know what the default css is. And when I search with the column menu, the following error appears:

Error: DataManager - executeQuery() : A query is required to execute

[Sridharan Jayabalan]

Thai,

For your query, we have prepared sample with "Thai" locale sample. We tried many attempts to replicate the issue but unable to reproduce it. Refer the below points which we have tried at our end.

• Applied the "Thai" locale in the sample.
• Verified header sorting and column menu sorting.
• Tested the column menu filter options by searching Thai text, which functioned as expected.
• Used Syncfusion Gantt version 27.1.57.

Note - Refer below attached sample. If anything we missed to do, share us those details.Refer below attached sample. If anything we missed to do, share us those details.

To proceed further share us the below requested details.

1. Share us exact replication procedure. (video demo).
2. Share us your datasource.
3. Other than your shared codes, are you used actionBegin event or actionComplete event in your sample? Share us those codes.

Otherwise, replicate your issue with the below attached sample or share your runnable sample for validation.

Sample - https://stackblitz.com/edit/react-cwreyz-iycuua?file=index.js

 

Regards,

Sridharan