How to disable automatically stretch feature on TreeGrid

[Ton That Hung]

Hi Syncfusion Team, 

By default, in the TreeGrid component, when the total width of the columns is less than that of the TreeGrid, the columns automatically stretch to occupy the remaining space in the TreeGrid. 

I want to disable this feature. When I load the TreeGrid, I want the column widths to be the widths that I've set, and any remaining empty space in the TreeGrid should stay empty. 

Reality:

Expected:

Please note: I want to use the resizing feature in my project. 

Link sample: https://stackblitz.com/edit/react-18up3r?file=index.js

Is there a way to achieve this requirement while still being able to use the resizing feature? 

I greatly appreciate your assistance. 

Thank you.

[Vasu Perumal]

Hi Ton That Hung,

Greeting from Syncfusion support.

Query:  How to disable automatically stretch feature on TreeGrid

We suggest you to use the autoFit property of grid in the dataBound event to render the column's width as we defined in the TreeGridColumn directive. By using this property, you can prevent the columns from automatically occupying the empty space other than the column’s width in the grid and now the remaining empty space will stay empty as required.

Kindly refer to the following code-snippet.

Index.js

 

function dataBound()

    {

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

        instance.grid.autoFit = true;     //set autoFit property

    }

 

<TreeGridComponent

          dataSource={virtualData}

          childMapping="Crew"

          enableVirtualization={true}

          treeColumnIndex={1}

          editSettings={editSettings}

          height="400"

          width="500"

          dataBound={dataBound}

          allowResizing

        >

          .  .   .  .

          <Inject services={[VirtualScroll, Edit, Toolbar, RowDD, Resize]} />

       

</TreeGridComponent>

Please refer the below documentation for more details :

https://ej2.syncfusion.com/react/documentation/api/grid/column/#autofit
https://ej2.syncfusion.com/react/documentation/grid/columns/auto-fit-columns#resizing-a-column-to-fit-its-content-using-autofit-method

Sample : https://stackblitz.com/edit/react-18up3r-nsexd7?file=index.js

Kindly get back to us for further assistance.

Regards,

Vasu P.

[Ton That Hung]

Hi Vasu Perumal,

Your solution works nicely for me.

Thanks for your support.

[Farveen Sulthana Thameeztheen Basha]

Ton That Hung,

Thanks for your update. Please get back to us if you need any further assistance on it. We are happy to assist you further.

Regards,

Farveen sulthana T