Command Column Stuck at approx. 110 px When Using Custom Buttons

[Peter]

Hi everyone,

I’m migrating a grid from Syncfusion’s built-in command column to a custom button setup so we can intercept the clicks and open our own dialogs. Since doing that, the command column inflates to about 110 px on the first render—even though the ColumnModel definition still has width = minWidth = maxWidth = 60. The Syncfusion metadata shows the right values, but the DOM’s <col> element ends up with the wider width. As soon as I grab a resize handle, the column snaps down to 60 px, so the underlying model is correct; it’s just the initial measurement that’s wrong.

I’ve tried:

Clamping the width in load, created, and dataBound.

Forcing width attributes on the <col> elements post-render.

Eliminating inline editing completely (we only open external dialogs), so there shouldn’t be any resizing logic fighting with the column.

Nothing prevents that first layout pass from deciding the column needs ~110 px. If I switch back to Syncfusion’s built-in command column (type: 'CommandColumn' with built-in Edit/Delete commands), it stays at 60 px instantly. So the issue appears only when we use custom buttons.

Question: Has anyone run into this and found a way to keep the command column fixed when using custom button definitions? Is there an earlier lifecycle hook, or a config switch I’m missing, to get Syncfusion to honour the 60 px width before that first measurement?

Thanks in advance for any clues!

[Dineshnarasimman Muthu]

Hi,

Greetings from Syncfusion Support.

We have reviewed your query regarding the implementation of a command column in the EJ2 Grid. It appears that you're using custom command buttons, and you've noticed that the column width does not reflect the specified value of 60px.

In Syncfusion EJ2 grid, the columns width will be adjusted based on the grid width. We suggest you to enable autoFit property to the grid, which will set the width defined in the grid column configuration. If the sum of all the columns width is less than the grid's width, it will leave white space. Also, the column.minWidth property will only be considered when resizing the grid column not when resizing the screen.

    <GridComponent

      dataSource={data}

      allowResizing={true}

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

      editSettings={editOptions}

      height={265}

      resizeSettings={{ mode: 'Normal' }}

      autoFit={true}

      dataBound={dataBound}

    >

 

Sample: https://stackblitz.com/edit/react-jzz7y6ll?file=App.js

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

If this didn't meet your requirement, please provide the following information to validate further.

• Please replicate your issue in the above provided sample so that we can identify your code implementation and issue.

• Please elaborate how you expect the command columns and other columns width to be in grid.

Regards,

Dineshnarasimman M