Grid autoresize not working as expecting when autoresizeOnLoad is true

[tekvsakdan]

I don't know if this is a bug or a feature. I have prepared the demo: http://jsfiddle.net/ejpn9/128/

The issue is when you resize the table by changing the screen width and then click on refresh button or invoke trigger("reloadGrid") on the grid, the grid is resized to initial width. If you disable autoresizeOnLoad: true, it works as expected.

The workaround is to disable autoresizeOnLoad: true, and put into gridComplete the code autoResizeAllColumns().

Can you check and fix (if it is possible)?

[OlegKi]

If I correctly understand your problem then you should remove the option autowidth: true, which will be misunderstood by free jqGrid in case of autoresizing. Moreover I don't understand how you want to combine autoresizeOnLoad: true, which reduces the size of column to the minimal width, with $(window).on("resize", ....) code, which expands all column till filling the width of the window. I suppose that you should remove the part of your code too. See http://jsfiddle.net/OlegKi/ejpn9/130/

[OlegKi]

One more small advices:

• you can remove all hidden columns. If your real example use datatype: "json" with loadonce: true then you can include the option additionalProperties: ['internship_url', 'expire_date', 'name', 'college', 'phone', 'email'] instead of all the hidden columns. It allow to use the property of local data withou creating unneeded hidden columns (<td> elements) on the DOM of the page.
• options gridview: true, ignoreCase: true and height: 'auto', are default and can be removed. The option datatype: "local" can be skipped too if data option specified.
• you can use formEditing: { width: 600 } instead of specifying the option for Add and Edit forms.
• I'd recommend to remove unneeded <div id="application-list-pager">, to use pager: true instead of pager: '#application-list-pager' and to skip '#application-list-pager' parameter from all methods which need it (for example navGrid).

As the result you will get shorter code which do the same: http://jsfiddle.net/OlegKi/ejpn9/132/

[tekvsakdan]

@OlegKi thanks for all the advices. I took this example from one jsfiddle and fork it just to show you what is bothering me. Anyway about hidden columns and how to avoid additional is an excellent advice.

In my real case I need 100% width because I have 57(!) columns (don't ask me why) and the left menu which could be hidden. I'm using also autoResize that the columns width are optimised. When the user hide the menu, then the available space for the table extends. But when we refresh the table, the width is back to the initial width, the same when the left menu is visible.

You can check this behaviour in my example if you resize the table (drag the middle vertical page bar to the left or to the right ) and click on the "refresh" button. The table will shrink or extend outside the borders. I found out that the autoresizeOnLoad: true is responsible for shrinking or extending because the grid remembers the initial size and the only workaround is to put autoResizeAllColumns() in the gridComplete instead loadComplete.

I hope I was clear enough what I think it is not expected behaviour of the grid.

[OlegKi]

I hope, that I understand correctly your problem now. The demo http://jsfiddle.net/OlegKi/ejpn9/134/ shows how one can fix the problem. It's important to understand that jqGrid holds widthOrg property with original value of width for every item of colModel. The feature isn't depend on the auto-resizing functionality. The typical scenario is the following: one creates grid with some relatively good values of width for the columns. Then the user resize some column with respect of drag and drop. After that one call in some way setGridWidth with shrinking. jqGrid should try to adjust the width of all columns. If one would use the current width values then the previous bad setting of the width of some column could make the adjustment of the columns bad. Thus if one would set the width of the first column to 20 and the second to 10 then the first column will have always twice width of the second column.
In your case you want to use the last values of the column widths, calculated by autoResizeAllColumns as the basis of the proportions of the column widths. Thus you could just reset the widthOrg inside of jqGridAfterLoadComplete event (the last event after reloading of the grid).

The code, which I used in the demo http://jsfiddle.net/OlegKi/ejpn9/134/ is the following

var applicationGrid = $("#application-list"),
    myData = [...];

$(window).on("resize", function() {
    var newWidth = applicationGrid.closest(".ui-jqgrid").parent().width();
    applicationGrid.jqGrid("setGridWidth", newWidth, true);
});

applicationGrid.on("jqGridAfterLoadComplete", function () {
    var colModel = $(this).jqGrid("getGridParam", "colModel"), i, cm;
    // reset widthOrg to the new values after autoResizeAllColumns
    for (i = 0; i < colModel.length; i++) {
    	cm = colModel[i];
    	cm.widthOrg = cm.width;
    }
    $(window).triggerHandler("resize");
}).jqGrid({
    ...
});

By the way, it's better to register first the even handler resize and jqGridAfterLoadComplete before creating the grid. As the result the events will be called already during the initial filling of the grid during creating.

[OlegKi]

I posted today some new features in the code of free jqGrid. You can use now practically your original code. You need just to add new resetWidthOrg: true property to the option autoResizing:

autoResizing: {
    compact: true,
    resetWidthOrg: true
}

It will reset the widthOrg properties of all columns after auto-resize to the valeu from the width property. You can see on the demo https://jsfiddle.net/OlegKi/ejpn9/136/ the results. I stress that the demo uses the latest code from GitHub instead of version 4.13.6, which uses your original demo.

[tekvsakdan]

This works: http://jsfiddle.net/OlegKi/ejpn9/134/
this not: https://jsfiddle.net/OlegKi/ejpn9/136/

I guess you have changed the paramter resetWidthOrg to adjustGridWidth but it is not working at the moment.

I have one question. Is there any list of what kind of properties are available for options or we must search through the source code.

[OlegKi]

Could you describe more exact, which is not working in https://jsfiddle.net/OlegKi/ejpn9/136/? Which web browser you use in the tests? In my tests both https://jsfiddle.net/OlegKi/ejpn9/136/ and http://jsfiddle.net/OlegKi/ejpn9/134/ displays absolutely the same results. I described explicitly in my last comment, that the code from the demo http://jsfiddle.net/OlegKi/ejpn9/134/ works on jqGrid 4.13.6, but https://jsfiddle.net/OlegKi/ejpn9/136/ with more short code (with the option resetWidthOrg) works only with the latest code of jqGrid from GitHub. One can download it from GitHub or to use from RawGit (see the wiki).

The documentation of full functionality of free jqGrid is complex and there are no full documentation currently. If you know at least the syntax of TypeScript, then free-jqgrid.d.ts could gives you many helpful information. There are exist text editors (like Visual Studio Code), which parse the reference like /// <reference path="../free-jqgrid.d.ts" /> (see the example) and gives case sensitive tooltips and marking of wrong parameters and methods during editing of the code. I don't finished the description of all options methods and events in the file free-jqgrid.d.ts, but I plan soon finish it. It contains definition of more as 90% of has almost 2000 lines of code.

[tekvsakdan]

I'm using Google Chrome 56.0.2924.87 (64-bit) on Ubuntu 16.04. I cleared the file cache and the example
https://jsfiddle.net/OlegKi/ejpn9/136/ is not working. The external source is https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js.

Thanks about the info about the documentation. It will help me a lot.

[OlegKi]

Could you open the file https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js in your web browser and verify that you can see "2017-02-07" (or higher date) in the comment at the beginning of the file. The picture, which you posted just shows that $(window).triggerHandler("resize"); was not worked on your computer because it was started before jqGrid was created. The goal of resetWidthOrg: true was changing the behavior of jqGrid on resizing. Do you tried to resize the window on the demo https://jsfiddle.net/OlegKi/ejpn9/136/? Uses it proportions of columns based on the content of the column or not?

The demo https://jsfiddle.net/OlegKi/ejpn9/139/, is the combination of http://jsfiddle.net/OlegKi/ejpn9/134/ and https://jsfiddle.net/OlegKi/ejpn9/136/ . It registers resize handler before the grid is created and it triggers "resize" inside of jqGridAfterLoadComplete. No manual setting resetting of widthOrg is required. Does it work on your computer?

[tekvsakdan]

I can see "2017-02-07" in the file https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js.

When I open https://jsfiddle.net/OlegKi/ejpn9/136/, the table has 100% width. When the window is resized, the width is still 100%. But when I click on "Refresh" button it resized back to WidthOrg. I have checked also on Windows 7, Firefox, Google Chrome.

It works fine https://jsfiddle.net/OlegKi/ejpn9/139/.

[OlegKi]

If you want that the grid be resized after every load and reload then you should call setGridWidth as the final step of loading or reloading. You can trigger resize event (like on the old demos) or to use the code like on https://jsfiddle.net/OlegKi/ejpn9/140/:

var applicationGrid = $("#application-list"),
    myData = [...],
    maximizeGrid = function() {
        var newWidth = applicationGrid.closest(".ui-jqgrid").parent().width();
        applicationGrid.jqGrid("setGridWidth", newWidth, true);
    };

$(window).on("resize", maximizeGrid);

applicationGrid.on("jqGridAfterLoadComplete", function () {
   maximizeGrid();
}).jqGrid({
    data: myData,
    ...
}).jqGrid('navGrid');

I hope, that everything is clear now.

Please close the issue if the problem, which you reported, is solved now.

[tekvsakdan]

Thank you for everything. It works as expected.