How to dynamically set grid column width

[ilywanziParticipant]

Hi, I met a problem to set grid column width. I set “100%” for the grid width, but for the column width, I found two scenarios.

First, if there are not many columns, I only set the first column to “10%”, not set the rest, then all the columns will fit the whole width. But if the number of columns change later, become 20 columns, then all the columns will become very narrow, and the horizontal scroll bar is not showing.

Second, if I use number the set the column width, such as 100, or 150, if not many columns, then those columns can not fit the whole width. But the good thing is that if we have many columns, then the scroll bar will show up.
Is there a way to handle this problem? Thanks.

[ilywanziParticipant]

Hi, I have done this by this way:

if(colNum > 9) {
  columns.push({...baseCol, editable: true, columntype: 'numberinput', width: 150 })
}
else {
  columns.push({ ...baseCol, editable: true, columntype: 'numberinput' });
}

Not sure if it is a good way to solve the problem.

[HristoParticipant]

Hello ilywanzi,

Yes, this is a good solution.
If you know the exact moment when the number of columns is changed then you could change their “width” member.
For this purpose, the setcolumnproperty method will be useful.
More details you could find in the API Documentation page.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts