How to set grid column widths in pixel correctly

[Dario S]

Hi all,

I have been trying out this great product. However, I am having some trouble setting up grid to have column widths in pixels.

If the screen size is less than the sum of all column widths, I can see that each column has given pixel width. However, if the screen is bigger than the column widths are turned into proportions to fit the whole screen. Is there a setting how this can be changed?

Below is my code:

<GridComponent dataSource={testData} gridLines="Both" allowResizing={true} autoFitColumns={false}>

  <ColumnsDirective>

    {columns.map(x => (

      <ColumnDirective

        key={x.id}

        allowResizing={x.canBeResized}

        allowReordering={x.canBeMoved}

        field={x.id}

        headerText={x.name}

        width={`${x.width}px`}

      />

    ))}

  </ColumnsDirective>

  <Inject services={[Resize]}/>

</GridComponent>

On smaller screen sizes, the horizontal scrollbar is visible and the grid pixel sizes are used:

However, when the screen size is bigger that the whole grid, columns are resized proportionally:

[Praveenkumar Gajendiran]

Hi Dario, 

Greetings from Suyncfusion support. 

We checked your query and provided screenshot, based on that we infer that you need to show the content without wrapping in the Grid. You can achieve your requirement by using autoFitColumns() feature.  

The autoFitColumns method resizes all the columns in the Grid to fit the widest cell’s content without wrapping. Please refer to the below code example and sample for more information. 

 Code Example: 

dataBound(args) { 

    this.grid.autoFitColumns();  // autofit all the columns in the Grid 

  } 

Sample: https://stackblitz.com/edit/react-rybd27-bvpcql?file=index.js 

Refer the below document for autofit Specific Columns , dataBound event, autoFitColumns method and Column.Width property of Grid 

Autofit Specific Columns: https://ej2.syncfusion.com/react/documentation/grid/columns/#autofit-specific-columns  

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

                 https://ej2.syncfusion.com/react/documentation/api/grid/#autofitcolumns 

                 https://ej2.syncfusion.com/react/documentation/api/grid/column/#width 

Please get back to us if you need further assistance. 

Regards, 

Praveenkumar G 

[Dario S]

Hi Mr. Praveenkumar,

Thanks you for your help.

however, I am not trying to make columns autoFit, I want to specify the width in pixels that should always be applied. I don't want the grid to resize columns.

Would something like that be possible?

[Praveenkumar Gajendiran]

Hi Dario,

Thanks for your update.

We have checked your reported issue at our end. We have prepared a Grid sample by setting the Grid column width dynamically and checked the sample by resizing the browser window, but = we are unable to reproduce the reported issue at our end and everything works fine. For your convenience we have prepared a video demonstration for the same. Please find the link below  

Video Link: https://www.syncfusion.com/downloads/support/forum/159302/ze/UN0A0C~1-1150856454.zip
Sample Link: https://stackblitz.com/edit/react-rybd27-bvpcql?file=index.js

We are not able to clearly understand your requirement from the provided information. So please share us the following additional details to validate further on this. 

1. Explain your issue or requirement scenario with the video demonstration.
2. Did you apply any custom CSS in your sample?
3. Syncfusion package version.

Please get back to us with the requested details.

Regards,
Praveenkumar G