The horizontal scrollbar always appears in the grid with frozen columns.

[Hung Luong]

Hi Syncfusion Team, 

I'm using a Grid and utilizing the 'freeze' property to fix the outermost columns on both sides of the Grid. However, I'm encountering an issue where the horizontal scrollbar always appears, even when it's not necessary (such as when the screen width is sufficient to display all columns).

Here is an example: https://stackblitz.com/edit/react-b76rbg-6swkyz?file=index.js

So I want the scroll bar to only appear when necessary instead of always being visible. Is there a way for me to achieve that?

Thanks.

[Hemanthkumar S]

Hi Hung Luong,

Greetings from Syncfusion support.

Query: I'm using a Grid and utilizing the 'freeze' property to fix the outermost columns on both sides of the Grid. However, I'm encountering an issue where the horizontal scrollbar always appears, even when it's not necessary (such as when the screen width is sufficient to display all columns).

Based on your provided information, it seems you want to hide the horizontal scrollbar when the screen width is sufficient to display all columns. To achieve this, we have prepared a sample-level solution. We recommend displaying or hiding the horizontal scrollbar inside the dataBound event of the Grid. This can be done by comparing the cumulative width of the movable columns with the width of the movable table. Additionally, we suggest recalculating this when the window is resized to ensure responsive behavior.

For more information, please refer to the cod example, documentation, video, and sample.

[index.js]

 

  constructor() {

    super(...arguments);

    this.handleResize = this.calScrollbar.bind(this);

  }

 

  calScrollbar() {

    const content = this.grid.getContent();

    const scrollbar = content.querySelector('.e-scrollbar');

    const movablecontentTable = content

      .querySelector('.e-movablecontent')

      .querySelector('table');

    const movablecontentTableWidth =

      movablecontentTable.getBoundingClientRect().width;

    const movableColumns = this.grid.movableColumns;

    let movableColumnsWidth = 0;

    for (let i = 0; i < movableColumns.length; i++) {

      movableColumnsWidth += parseInt(movableColumns[i].width, 10);

    }

    if (movablecontentTableWidth <= movableColumnsWidth) {

      scrollbar.style.display = 'flex';

    } else {

      scrollbar.style.display = 'none';

    }

  }

 

  componentDidMount() {

    window.addEventListener('resize', this.handleResize);

  }

 

          <GridComponent

            ref={(g) => (this.grid = g)}

            dataSource={orderDetails}

            height="350"

            enableHover={false}

            dataBound={() => {

              this.calScrollbar();

            }}

          >

 

dataBound API: https://ej2.syncfusion.com/documentation/api/grid/#databound

Sample: https://stackblitz.com/edit/react-b76rbg-cyqqpa?file=index.js

Please feel free to contact us if you require any further assistance. We are always available and eager to help you in any way we can.

Regards,

Hemanth Kumar S

Attachment: video_5294423c.zip