Column width

[Irvin Dominin]

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]

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.

$("#Grid").ejGrid({

. . . . . .

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.

Regards,

Madhu Sudhanan. P

[Irvin Dominin]

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]

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.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

Regards,

Madhu Sudhanan. P

[Leonardo Culjak]

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

[Thavasianand Sankaranarayanan]

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  

14.1.041.  

 

We have prepared a sample in JsPlayground. 

 

JsPlayground link: https://jsplayground.syncfusion.com/bqlob1jd 

  

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.

 

Regards, 

Thavasianand S.