Update sub menu list on context menu

[Ton That Hung]

Hi Syncfusion Team,

In my project, I need to build a feature: "expand to a specific level" using a context menu. 

When hovering over "Expand up to" in the context menu, there will be a list of options to choose from: level 0, ..., level {max - 1}, where max will depend on the data loaded into the TreeGrid. This means that when the data changes, this list of options may change based on the maximum level. 

However, when I change the data, even though the max level has changed, the list of options is not updated as I expected. Please note: this issue sometimes appears, and sometimes it doesn't, which is quite strange. 

Link sample: https://stackblitz.com/edit/react-yp9vqb?file=index.js,data.js

Link video: https://www.loom.com/share/Loom-Message-15-September-2023-1f6b0f2b25e841338b6f6e6694d43704
In my video: In my video, I have tested it a few times, and the issue occurred only once(at 0:42). I expect the options on the submenu to be: Level 1, Level 2, ...., and Level 7.

Is there an issue with my approach? I'm looking forward to your response.

Thanks.

[Pon Selva Jeganathan]

Hi Ton That Hung,

Query :  In my video, I have tested it a few times, and the issue occurred only once(at 0:42). I expect the options on the submenu to be: Level 1, Level 2, ...., and Level 7.

Is there an issue with my approach? I'm looking forward to your respons

We were able to replicate the issue at our end some rare cases. On further validation, the contextmenuitems is not updated properly. So, this issue occurred. To avoid this issue, we suggest you to set the contextMenuItems in contextMenuOpen event.

Refer to the below code example,

 

 const contextMenuOpen = (args) => {

    const flattenData = treegridObj.current.flatData;

    const maxLevel = maxBy(flattenData, (o) => o.level).level;

    setLevel(maxLevel);

//Here update the context menu items

    args.items = {

      text: 'Collapse up to',

      target: '.e-content',

      id: 'collapserow',

      items: Array.from({ length: level }, (_, index) => {

        return { id: `${index}`, text: `Level ${index}` };

      }),

    };

  };

  return (

    <div className="control-pane">

      <div className="control-section">

        <button onClick={() => setDataSource(sampleData1)}>

          Change data source

        </button>

        <span>Max level:{level}</span>

        <TreeGridComponent

          dataSource={dataSource}

          treeColumnIndex={1}

          childMapping="subtasks"

          height="400"

          idMapping={'taskID'}

          parentIdMapping={'parentId'}

          contextMenuItems={contextMenuItems}

          contextMenuOpen={contextMenuOpen.bind(this)}

          ref={treegridObj}

          dataBound={dataBound}

        >

 

Refer to the below sample,

https://stackblitz.com/edit/react-yp9vqb-sje42u?file=index.js

Kindly get back to us for further assistance.

Regards,

Pon selva

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

[Ton That Hung]

Hi Pon Selva Jeganathan,

It works for me.

Thanks for your support.

[Pon Selva Jeganathan]

Hi Ton That Hung,

Thanks for the update. 

We are happy to hear that your query has been resolved by our solution. 

Please get back to us if you have any further queries.