Enhancement: Add maxWidth-Property to colModel-options

[SKPFCW]

Hi Tony.

I would like to have an option to set the maximum width of a column.
I often have the requirement that the width of one or more columns should be adjusted automatically, but must not be larger than a defined value.
I've already tried to achieve this via the max-width CSS option that I set for all affected td elements, but failed. Apparently this attribute is not included in the column width calculation done by jqGrid.
Would such an option be possible - or is there a way to achieve the desired result that I haven't thought of yet?

Thank you in advance,
Robert

[tonytomov]

Hello Robert,

Thank you for question.

You can't achieve this with css. All the column widths are calculated with javascript.
We have something similar (not exactly for you problem, but is a start) - this is a option minResizeWidth which can be applied to each column and the global grid option minColWidth see docs here

We can easy add a maxResizeWidth option, but I think this will not do the job for you since it is related only when the user resize the column.

I will think what I can do. You should know that in this case ( "columns should be adjusted automatically,") the option shrinkToFit should be set to false.

Maybe you can look at column option autosize too .

Will replay in the next week what we can/can't do.

Best Regards,
Tony

[tonytomov]

Hello Robert,

Have a question - What you understand under automatic adjustment of the column width?

Best Regards,
Tony

[SKPFCW]

Hello Tony,

many thanks for the support.

I often have the following requirement:

The grid basically consists of three types of columns:

1. "Fixed" columns with a fixed width, e.g. for a date or a numeric value. These columns must always be displayed in the defined width and must not become larger or smaller. (This can easily be achieved in jqGrid using the fixed attribute)
2. "MaxWidth" columns with a maximum width. These columns can shrink in width to a minimum if necessary, but should not be able to grow larger than a predefined maximum in order to leave as much room as necessary for the third type of column. An example of such a column content would be email addresses. The addresses used in my company never take up more than 250 pixels of space in the standard font.
3. "Auto" columns that use the available space. These columns often contain longer text (e.g. postal address, etc.) and their content should be readable as much as possible:

Let's assume the following ColModel:

Col1: Fixed - 50px
Col2: Minimum: 50px, Maximum: 250px
Col3: Auto 
Col4: Auto 

Desired results assuming a window width of 1000px:

Col1: 50px
Col2: 250px; (Col2 will never be wider than 250px, even if the cell content should be wider than 250px);
Col3: 100px; (Col3 and 4 takes up the free available space; assumed current data width in col3: 100px)
Col4: 600px; (assumed current data width in col4: 800px, content will be truncated)

|>111<|>22222222222222<|>33333333<|>444444444444444444444x|

Desired results assuming a window width of 200px:

Col1: 50px
Col2: 50px; (Col2 shrinks to a minimum, content will be truncated);
Col3: 0px; (Col3 and 4 takes up the free available space; current data width in col3: 0 - col3 is empty)
Col4: 100px; (current data width in col4: 50px)

|>111<|>22x||>44<   |

The following applies:
The grid must not exceed the available window width horizontally - no horizontal scrolling.
The table rows are usually always single-line, i.e. without text wrapping in the cells.

I hope this makes it somewhat clear

Thank you,
Robert

[tonytomov]

Hello,

Thank you very much for the detailed explanation. Now it is clear.
Another question - does this mean that the column width should be recalculated on every new page, sort or search?

Regards
Tony

[SKPFCW]

Hello Tony,

No problem - I would like to thank you for the outstanding support.

In the particular scenario in my company, it would be sufficient if the calculation was done when the grid was initially loaded and persisted for subsequent actions like scrolling, sorting, etc.

Other users may have further requirements in this regard, and maybe a recalculation-method that the programmer could call up if necessary would be useful.

Have a nice day
Robert

[tonytomov]

Hello Robert,

I'm going to implement this feature, but have some difficulties to implement it.

1. In case of shrinkToFit = false there is no problem - the max width can be set easy.
2. In case of shrinkToFit = true there are situations that will make the grid to look not as wanted.

Let suppose that we have a grid with 4 columns, shrinkToFit = true and one column is set to have maxWidth.
If the new calculated width > maxWidth then the column width will become maxWidth. In this case we have two possibilities:

1. The grid will have a gap between the grid box and the table (not looking as expected - i.e gridbox width = table width)
2. We need to do another recalculation of the remaining columns without maxWidth in order to fix the problem. In this case what will happen if all the four columns have maxWidth?

IMHO leaving the gap between the grid box and table is recommended, because of the complexity of the procedure, but in this case we will have grid not looked as expected.

What is your opinion?

Best Regards,
Tony

[SKPFCW]

Hello Tony,
As so often - a closer look turns a simple idea into a complex task. ;-)

In the case described, as a user I would expect the second option mentioned (recalculation of the columns).
In the special case you mentioned, that all columns of a grid are equipped with the MaxWidth attribute, I see several possibilities:

1. Responsibility of the developer. The programmer implementing the grid must take this functional limitation into account. A clear reference to this limitation in the documentation would be mandatory. In practice, disregarding this would lead to a gap in the grid.
2. Automatic error correction: The MaxWidth attribute of the last column is ignored and the last column takes up all the remaining space to avoid a gap in the grid.
3. Preserving the visual appearance: The grid software will automatically insert a blank column at the end of the grid to avoid the gap in the grid.

Since the jqGrid is primarily aimed at software developers and less at the end user, in my personal opinion the first alternative is completely sufficient.

Thank you
Robert

[tonytomov]

Hello Robert,

Thank you for the response.
I will ignore option 3, sine of complexity and since the visual effect will be the same.

I will try with option 1 and see what will bring this. Hope to have final answer ASAP.

Thank you again.

Best Regards,
Tony

[tonytomov]

Hello Robert,

I have added the maxWidth option in colModel.

You can test it. Of course this is working code and needs to be refined.

Please let me know if it is ok for you.

Best Regards,
Tony

[SKPFCW]

Hi Tony,
I will test the new feature and get back to you as soon as possible.

Thank you
Robert

[SKPFCW]

``I'm sorry, it took a few minutes because version 5.5.4 was still in use before.

After upgrading to 5.7.0 and downloading the new source files extended by the maxWidth attribute from the repository, I unfortunately could not determine the desired effect:
Column 6 marked in yellow (labeled as "Benutzerart") should be a maximum of 100 pixels wide according to the colModel definition. Unfortunately this is not the case. Instead, there is now some free space at the end of the line (see screenshot, green marking)

This is the output from the former Version 5.5.4 (same data, same colmodel without "maxWidth" on column 6)

Note: The free space also occurs when the maxWidth attribute has not been set. Maybe there is a problem on our side after the upgrade to version 5.7.0.

Below is the ColModel definition:

{
   "autowidth": false,
   "shrinkToFit": true,
   "altRows": true,
   "sortable": true,
   "cellEdit": false,
   "headertitles": true,
   "colModel": [
      {
         "label": "Pers.Nr.",
         "name": "Personalnummer",
         "width": 60,
         "fixed": true,
         "sortable": true,
         "sorttype": "numeric",
         "align": "center",
      },
      {
         "label": "Benutzername",
         "name": "Benutzername",
         "sortable": true,
      },
      {
         "label": "OE",
         "name": "OE",
         "width": 60,
         "fixed": true,
         "sortable": true,
         "sorttype": "numeric",
         "align": "center",
      },
      {
         "label": "OE Lang",
         "name": "_OELang",
         "hidden": true,
         "exportcol": true
      },
      {
         "label": "Einsatzort",
         "name": "Einsatzort",
         "sortable": true,
      },
      {
         "label": "Tätigkeit",
         "name": "Tätigkeit",
         "sortable": true,
      },
      {
         "label": "Benutzerart",
         "name": "Herkunft",
         "sortable": true,
         "maxWidth": 100
      },
      {
         "label": "Anz. Anwendungen",
         "name": "CountApps",
         "width": 110,
         "fixed": true,
         "sortable": true,
         "sorttype": "numeric",
         "align": "center",
      },
      {
         "label": "Anz. Ordnerberechtigungen",
         "name": "CountFAR",
         "width": 110,
         "fixed": true,
         "sortable": true,
         "sorttype": "numeric",
         "align": "center",
      },
      {
         "label": "Anz. Profile",
         "name": "CountProfile",
         "width": 110,
         "fixed": true,
         "sortable": true,
         "sorttype": "numeric",
         "align": "center",
      },
      {
         "label": " ",
         "name": "_editable",
         "sortable": "false",
         "width": 24,
         "fixed": true,
      },
      {
         "name": "_key",
         "hidden": true,
         "key": true
      }
   ]
}

The other options:

   "autowidth": false
   , "shrinkToFit": true
   , "altRows": true
   , "sortable": true
   , "cellEdit": false
   , "headertitles": true

[tonytomov]

Which CSS framework is used (jQueryUI, Bootstrap3 or 4 or 5 )? Can I have the settings related to it?
Is the related jqGrid CSS file changed from you to meet some of your requirements?

What is the value width grid parameter in the options?

[tonytomov]

Hello Robert,

Thank you for the partial test case. I have play with it and found some other problems. Having this I will try to fix the calculation.
If you are able to give us more information it will be great.

Best Regards
Tony

[tonytomov]

Hello Robert,

Shortly with your setup maxWidth will never be set since you do not set default width in colModel. If this parameter is not set jqGrid set it to 150 by default.

To overcome such situation I have added defaultColWidth parameter in grid options, which default value is 150.
You can change it accordantly.

I have also fixed some other calculation problems and logic and hope that the script now will do this better.

We are close to the final things.

In the future it will be better if you put a working code which demonstrates the problem.

The fix is in GitHub.

Please let us know if you have any other problems with this.

Best Regards,
Tony

[SKPFCW]

Hello Tony,
Thank you for your detailed feedback.

Today I downloaded the jqGrid/js/jquery.jqGrid.min.js file from Github and integrated it into my project. I deactivated all of our extensions to the jqGrid code (own formatters) and CSS (adjustments to our color scheme).
In the ColModel I also specified the width attribute for the field.
Unfortunately without success - the specified maximum width of the field is still not taken into account and the gap is still there.

, {
	"label": "Benutzerart"
	, "name": "Herkunft"
	, sortable: true
	, width: 100
	, maxWidth: 100
}

Regarding the gap at the right edge of the grid, I found that the problem only occurs when paging is enabled.
I spotted a "padding-right: 20px" attribute in the CSS for the ui-jqgrid-hbox element and suspected that's where the error comes from. But in comparison with the CSS file from version 5.5.4, I found that this attribute is also set there. However, the calculated values ​​for the width attribute show that 20 pixels are suddenly missing in version 5.7.0 (possibly as space for a vertical scrollbar?)

This is the inspection from the V 5.7.0-results
The width decreases from 1636 (ui-jqgrid-div) to 1616 (ui-jqgrid-htable)

This the inspection from the V 5.5.4-results (same options/colModel, same data, same window-size)
The width 1636 is the same for ui-jqgrid-div and ui-jqgrid-htable

We use jQuery 3.1.0 and jQuery UI 1.12.1
The creation of an executable example would be very time-consuming, since the components in our environment are universalized and encapsulated several times. I'll see if I can recreate a fiddle to replicate the problems.

Best regards,
Robert

[SKPFCW]

Hi Tony - It's me again.

I think I found the problem with the maxWidth attribute.
In our implementation, the grid is always initialized with no data. In a second step, the data is subsequently inserted using the addJSONData method.
In a test fiddle, I inserted the data directly during initialization, then the calculation works correctly.
Please excuse me for not noticing this until now - as I said before: the implementation of the grid in our environment is very encapsulated.
So it looks like I'm the one I was talking about in the beginning who's now in need of a method that triggers a recalculation...

I'm now unsure about the gap in the grid. I saw on the screenshots in the documentation that this space is really reserved for a scrollbar.
According to my understanding, there is either a scrollbar or a pager. When the pager is displayed, the number of lines displayed is limited to the space available. In my opinion less vertical space should result in more pages but not a scrollbar?

However. The behavior was different in version 5.5.4:
Assuming this is the maximum window size

A reduced window increases the number of pages from 18 to 26

Reducing the amount of data by filtering reduces the pages.

In no case did a vertical scrollbar appear under 5.5.4

Have I forgotten to set a corresponding property or overlooked something?
http://jsfiddle.net/nkt5Lxbj/

Thank you,
Robert

[tonytomov]

Hello Robert,

The vertical scrollbar depend on the height setting and shrinkToFit option.
By example if you set height:100% or height: 'auto' you will never see a vertical scrollbar (initially),
but the grid box will change according to the number of loaded records. Just test it in your example
with 3 and 10 records. This setting also work with number of records - rowNum

The example you provide is exception (which we should maybe fix). The situation is that the number of records
is smaller the the actuarial grid height set and the grid does not check this. In your example if you set height: "70" you will see a "correct" grid.

Best Regards,
Tony

[SKPFCW]

Hello Tony,

I've done some tests over the past few days.
Unfortunately I didn't get the desired result.
In our implementation, the available height that the grid should occupy is calculated. This is then set using the 'setGridHeight' method. Also, the rowNum option is set based on the available space.
In the 5.5.4 version it was achieved that the grid always took up the available space and the pager was always displayed at the bottom of the window.
I cannot achieve this behavior with the 5.7 version.

Unfortunately, we are about to release our institute software extensively, so the switch to 5.7 seems too tricky for the moment. So I'll have to defer that for now - also the maxWidth property topic - but will get back to that as time permits.

Thank you in the meantime for your support.