Column not working with Width property

[Nguyen Khoa Lu]

Hi Syncfusion, I have a Data Grid in React, when I set column width for ColumnDerective, it not working.

Column always fill full width of GridComponent

Example:

I have a GridComponent with width = 1000 and 2 column A, B which A.width = 100, B.width = 100

When GridComponent rendered, A and B always fill full width of GridComponent (1000)

I want to Column render with width property without fill full Grid

Thanks you.

[Thiyagu Subramani]

Hi Nguyen, 

Greeting from Syncfusion support. 

By default, the columns width is automatically adjusted based on the Grid width . For example, if you set Grid width as 1000 and total columns width as 200px (for two columns). The columns automatically adjust the width and render with 600px. This is default behavior of current Grid architecture.  

If you want to fit the column width based on its content value , then we suggest you to use ‘autoFitColumns’ feature. This method resizes the columns to fit the widest cell’s content without wrapping. If the provided content placed within the columns width, then this feature fit the columns based on the provided width. So please check whether this feature is helpful.

AutoFitColumns Link: https://ej2.syncfusion.com/react/documentation/grid/columns/#autofit-specific-columns  

So, to achieve this requirement we suggest you to use ‘autoFitColumns’ feature and set the mode as Normal in the resizeSettings property . Please check the below sample and document for more information. 

. . .  . . 

  constructor() { 

    super(...arguments); 

    this.resizeSettings = { mode: 'Normal' }; 

  } 

  dataBound(args) { 

    this.gridInstance.autoFitColumns([]); 

  } 

Sample link:  https://stackblitz.com/edit/react-jybhsl?file=index.js 

 

API : https://ej2.syncfusion.com/javascript/documentation/api/grid/resizeSettingsModel/ -   By default resizeSettings defines the mode of Grid column resizing. The available modes are: Normal: Columns will not be adjusted to fit the remaining space. Auto: Resized column width will be adjusted by other columns automatically. 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S 

[Nguyen Khoa Lu]

Thank for your reply,

It it not my needed.

I have a Grid with width="100%"

In ColumnDirective component, I set width={100} and maxWidth={100}

And I want when Grid render, Column should show width as 100. Not fit which content and not fill with Grid.

Thanks

[Nguyen Khoa Lu]

I see Virtualization setting, but when I use it show me much error

Sample here:

Code Sandbox

Thanks you

[Nguyen Khoa Lu]

I have my solution for that.

Config parent element css have been soloved.

Thanks for your support

[Joseph Christ Nithin Issack]

Hello Nguyen, 

  We are glad to hear that your issue has been resolved. Please let us know if you need any further assistance on this. 

Regards, 

Joseph I.