1. Home
  2. Forum
  3. React - EJ 2
  4. How to manage expand/collapse state?

How to manage expand/collapse state?

Hi, 


I trying to task manage system with gantt chart component and tree grid component.

Component Version is '23.1.43'

"@syncfusion/ej2-react-gantt": "23.1.43",
"@syncfusion/ej2-react-grids": "23.1.43",
"@syncfusion/ej2-react-treegrid": "23.1.43"


We manage data with rest api server, and expandState stored in DB.

I found something strange.


I made 3 task with grant parent, parent, child.

and, expand all.

Image_1064_1708577705800

and collapse 'New Task1', then

Image_5186_1708577792739


At this time, I opend same project with 'TreeGrid'

Image_8358_1708577830704


'New Task 2' is collapsed, but 'New Task 3' is still in grid.


DB status is 

Image_9972_1708578014582


I hope to expand_state should be sync both Gantt And TreeGrid.


Do you have any idea for this problem?

I'd greatly appreciate any help you can of



5 Replies
SJ Sridharan Jayabalan Syncfusion Team February 23, 2024 01:45 PM UTC

Kyungjin,

 

Greetings from Syncfusion.

 

We have reviewed your query, made sample in both Treegrid & Gantt Chart. For both the components, render correctly as per the expand states set in the datasource. Also, while collapsing task id=1, it collapse all the three records (both components). For clarity, share the details asked below.

 

  1. Gantt Chart version?
  2. Is the issue occur in Treegrid or Gantt Chart from your side?
  1. What is the Timezone are you using?
  1. Complete code details.
  1. Proper replication procedure for the issue.
  1. If possible replicate the issue with the provided sample below and revert us back.

 

Treegrid Sample - Hk4y1w (forked) - StackBlitz

Gantt Sample - G7c2jm (forked) - StackBlitz

 

 

 

Regards,

Sridharan


KL Kyungjin Lee March 7, 2024 01:44 AM UTC

I've been debugging for the past few days to solve this problem.


Eventually, I found a strange problem.

As mentioned above, we store and manage the data in the DB and bring it to GanttChart using WebMethodAdaptor()


Left Code is example of GanttChart using WebMethodAdaptor()

Right Code is example using data.js.

 

dataSource = new DataManager : WebMethodAdaptor()import data from data.js as file
return (
<>
<div className='control-pane'>
<div className='control-section'>
<TreeGridComponent
ref={(instance) => {
treeGridInstance = instance
}}
id={'treegrid-' + projectData.idx}
dataSource={dataSource} // use DataManager(WebMethodAdaptor)
treeColumnIndex={1}
expandStateMapping='expandState'
childMapping='subTasks'
height={height * 0.62 + 'px'}
editSettings={{
allowAdding: true,
allowDeleting: true,
allowEditing: true, }}

// allowResizing={true}
// hasChildMapping='countOfChildTask'
idMapping='TaskID'
parentIdMapping='parentID'
loadChildOnDemand={true}
// allowPaging={false}
// toolbar={SFGanttToolbar2(projectIdx, handleOpenModal)}
// allowExcelExport={true}
// allowRowDragAndDrop={true}
contextMenuItems={[{text:'Happy', target: '.e-content', id:'happy'}]}
contextMenuClick={(args) => {
// console.log(JSON.stringify(args))
console.log(treeGridInstance)
debugger
}}
// enablePersistence={true}
// collapsed={collapsed}
// expanded={expanded}
>

return (
<>
<div className='control-pane'>
<div className='control-section'>
<TreeGridComponent
ref={(instance) => {
treeGridInstance = instance
}}
id={'treegridtest-' + projectData.idx}
dataSource={k1Data}
treeColumnIndex={1}
expandStateMapping='expandState'
childMapping='subTasks'
height={height * 0.62 + 'px'}
editSettings={{
allowAdding: true,
allowDeleting: true,
allowEditing: true,}}

// allowResizing={true}
// hasChildMapping='countOfChildTask'
// idMapping='TaskID'
// parentIdMapping='parentID'
// loadChildOnDemand={true}
// allowPaging={false}
// toolbar={SFGanttToolbar2(projectIdx, handleOpenModal)}
// allowExcelExport={true}
// allowRowDragAndDrop={true}
contextMenuItems={[{text:'Happy', target: '.e-content', id:'happy'}]}
contextMenuClick={(args) => {
// console.log(JSON.stringify(args))
console.log(treeGridInstance)
debugger
}}
// enablePersistence={true}
// collapsed={collapsed}
// expanded={expanded}
>


There is no problem at all when it is first loaded with data.
However, if the first node is opened and closed, the second node is different.


dataSource = new DataManager : WebMethodAdaptor()
import data from data.js as file
This screen capture showing when we load first time.

Image_8659_1709218327153
This screen capture showing when we load first time.

Image_3018_1709218445315
When we close first node and open again, second node is folded!
 Image_6205_1709218354633
Do the same action with right screen capture. but second node is opened.

Image_7573_1709218471692


After load data using WebMethodAdaptor, check all nodes were open.

And, When close the first node and opened again, then second node is closed.

This strange problem is only happened when we use DataManager/WebMethodAdaptor.

( in case of using stored data, data.ts, didn't caused the problem )


This bug is driving me crazy.

Please help me.



Attachment: data.ts_b44fd452.zip


SM Shek Mohammed Asiq Abdul Jabbar Syncfusion Team March 9, 2024 02:12 PM UTC

Hi Kyngjin,


On further validation, we have considered the reported issue (“Nested parent gets collapsed when we collapse the main parent in remote data.”) as a bug. Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle) and will include the fix in our upcoming NuGet release which is expected to be rolled out on March 27, 2024. Until then we appreciate your patience.


You can now track the status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link. 

https://www.syncfusion.com/feedback/51604/nested-parent-gets-collapsed-when-we-collapse-the-main-parent-in-remote-data

Note: To view the above feedback, kindly login into your account. 

Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.


Regards,

Shek Mohammed Asiq


SM Shek Mohammed Asiq Abdul Jabbar Syncfusion Team April 1, 2024 02:49 PM UTC

Hi Daniel,


We regret to the delayed response. We have been actively working on the issue and due to its complexity, we need additional time to provide the fix. We work to provide you the solution in our upcoming patch release which was expected to be rolled out in the second week of April 2024. Meanwhile we will share custom patch in case of the fix was prepared before the proposed timeline. Until then we appreciate your patience.


Regards,

Shek


KT Karthikeyan Thangaraj Syncfusion Team April 12, 2024 02:23 PM UTC

Hi Kyngjin,


The reported issue was caused while collapsing the parent record, its child expanded status also gets prevented in that case and fix for the issue “Nested parent gets collapsed when we collapse the main parent in remote data
”  has been rolled out in our latest patch release (v25.1.39).  So, upgrade to our latest version to resolve the problem.


Sample :- https://www.syncfusion.com/downloads/support/directtrac/general/ze/LOADON~1-1259519538


We thank you for your support and appreciate your patience in waiting for this release. Please contact us if you would require any further assistance.


Regards,

Karthikeyan T


Loader.
Up arrow icon