TreeGrid stacked header is wrong after change state

[Ton That Hung]

Hi Syncfusion Team,

I'm using the stacked header feature of the TreeGrid component but there is a weird issue on that. When the state changes, causing the component to re-render, the format of the TreeGrid is no longer correct.

Note: the error only occurs in the case of only one child column, if there are two or more child columns, the error will not occur.

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

Is there any way to solve this problem?

Thanks.

[Pon Selva Jeganathan]

Hi Ton,

We are able to replicate the issue at our end. To avoid this issue, we recommend using the refreshColumns method of the TreeGrid after updating the columns property. This method effectively refreshes the TreeGrid column changes.

Refer to the below modified code example,

const Stacked = () => {

  const [columns, setColumns] = React.useState(column1);

  const click = function (args) {

    setColumns(column1);

    var tree =

      document.getElementsByClassName('e-treegrid')[0].ej2_instances[0];

tree.refreshColumns();

  };

  const click1 = function (args) {

    setColumns(column2);

    var tree =

      document.getElementsByClassName('e-treegrid')[0].ej2_instances[0];

    tree.refreshColumns();

  };

  return (

    <div className="control-pane">

      <button onClick={click}>Stacked</button>

      <button onClick={click1}>Normal</button>

      <div className="control-section">

        <TreeGridComponent

          dataSource={[]}

          treeColumnIndex={1}

          childMapping="subtasks"

          height="350"

          columns={columns}

          allowResizing

        >

 

Refer to the below sample,

https://stackblitz.com/edit/react-p94yv4-txs1pf?file=index.js

Refer to the below API documentation,

https://ej2.syncfusion.com/react/documentation/api/treegrid#refreshcolumns

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.