We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Column width

Good morning,

I need to set a specific width of some columns, for doing so I use width property of the columns array.

                columns: [
                        { field: "OrderID", headerText: "Order ID", isPrimaryKey: true, width: 75, textAlign: ej.TextAlign.Right },
                        { headerText: "Display time", template: true, templateID: "#template", width: 80 },
                        { headerText: "Display year", template: true, templateID: "#template1", width: 80 },
                        { headerText: "Display date", template: true, templateID: "#template2", width: 80 },
                        { field: "Freight", width: 75, format: "{0:N2}", textAlign: ej.TextAlign.Right },
                        { field: "OrderDate", headerText: "Order Date", width: 80, format: "{0:MM/dd/yyyy}", textAlign: ej.TextAlign.Right },
                        { field: "ShipCity", headerText: "Ship City", width: 110 }

In the page each column take a part of the exceeding space to fill the grid contente. How do I avoid this? I need a fixed column width (eventually resizable by the user) and eventually a column that takes the exceeding space.

Kind regards,
Irvin Dominin

Attachment: GridSample_ee25a283.zip

5 Replies

MS Madhu Sudhanan P Syncfusion Team March 27, 2015 09:54 AM UTC

Hi Irvin,

Thanks for using Syncfusion products.

Essential JS Grid uses fixed table layout to render the grid content and hence the columns are adjusted to occupy the grid content. We would like to let you know that this is the default behavior. And from the attached sample and the query, we understood that you want to occupy only the place need for grid in the container based on column width property in such cases we can control the width of the grid using the width property of the grid.


. . . . . .

width: 500


Now the column`s width will be adjusted to fill the grid content within 500px.

Please let us know if you have any queries.


Madhu Sudhanan. P

ID Irvin Dominin March 27, 2015 10:28 AM UTC

Hi Madhu Sudhanan,

Thanks, but I don't want that columns fill the unused grid width, if they have a defined width they have to use it without take any part of empty grid space (eg grid: 200; col: 50; col: 70, I need 80 of free space).

I hope to be clear, how can I handle this?

Kind regards,
Irvin Dominin

MS Madhu Sudhanan P Syncfusion Team March 30, 2015 12:34 PM UTC

Hi Irvin,

Thanks for the information. We considered this requirement “Render grid based on columns width instead of auto filling offsetParent“ as feature and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.



Madhu Sudhanan. P

LC Leonardo Culjak April 6, 2017 01:59 PM UTC

My grid is inside a Tab control. is it possible that widths and scrollbar are not showed correctly for that reason ?

TS Thavasianand Sankaranarayanan Syncfusion Team April 7, 2017 11:10 AM UTC

Hi Leonardo, 
Thanks for contacting Syncfusion support. 
Query: Width, scrollbar are not shown correctly when grid inside a tab control. 
We have analyzed your query and you have mention that width, scrollbar are not shown correctly. 
For scrollbar not shown correctly. We can face the issue when the grid render is in hidden tab and move to hidden from active tab scrollbar is not generated. But we have fixed the issue in the Essential studio version  
We have prepared a sample in JsPlayground. 
We found that you have mentioned the width, Here the width is minWidth or scrollSettings’s width property of ejGrid. So, please clarify that. 
Please provide a following details for better assistance. 
  1. Screen shot or video demonstration of the issue.
  2. Share the Grid code example.
  3. Essential studio version.
  4. If possible share the sample or reproduce the issue in the attached sample.
Thavasianand S. 

Live Chat Icon For mobile
Up arrow icon