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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Column width

Thread ID:





118640 Mar 26,2015 05:28 PM UTC Apr 7,2017 11:10 AM UTC JavaScript 5
Tags: ejGrid
Irvin Dominin
Asked On March 26, 2015 05:28 PM UTC

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

Madhu Sudhanan P [Syncfusion]
Replied On 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

Irvin Dominin
Replied On 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

Madhu Sudhanan P [Syncfusion]
Replied On 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

Leonardo Culjak
Replied On 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 ?

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon