Hi Ricardo,
Greetings from syncfusion support.
Query : I'm having issues setting the width of the columns on the Grid. This should set the width of the columns to 120px, but that is not the case, my columns are ignoring the width, and the grid is getting the full width of the container. What should I do to specify the width of the columns of the grid in px?
By default in EJ2 Grid, grid width adapts the parent container’s width. If the grid’s width is greater than all the column’s width, then it equally shares the remaining width to the grid columns.
For example grid having the width as 500px. And having 2 columns with the width as 150px for each. Now the grid width (500px) is more than the columns width(300px) by 200px. So it gives empty spaces for 200px in grid. To avoid this grid shares this 200px to each column (i.e., 250px for each ). This is the behavior of EJ2 Grid.
If you need to maintain the column width as set in the API, then set grid width as all the columns width in its created event.
created(args) {
var width =0;
// get all the columns
var cols =this.grid.getColumns();
for(var i=0; i<cols.length; i++){
// calculate all the columns width
width = width + (+cols[i].width);
}
// set the calculated width to the grid
this.grid.width = width + 19; // 19px - default width added in grid content
}
|
If you still face the same problem, please get back to us with the below details to validate further on this.
- Share the full grid code and explain your requirement in detail.
- Share the screenshot of expected result and actual result.
- If possible share the issue reproduced sample with us.
Regards,
Rajapandiyan S
