[Idea] Full Size functionality

[angeljqv]

This will allow the grid to occupy the entire screen size, it would help to review the rows

Example: https://jsfiddle.net/690oehLm/ (Click on Expand)
The example is just a proof of concept, it needs work, for example on height:auto

[tonytomov]

Thanks. I will investigate this. First test - after toggle (when restoring the original position) the width goes smaller with 15px,)

[angeljqv]

Yes, it does, possibly because of the scrollbar,
It was just a basic example to show the idea, as I mentioned it would also fail in height:auto, in that case i did add another scrollbar to the gbox's parent, and since I don't know all the scenarios , possibly needs many changes
Also need to add the toggling of expand and reduce icons

[cesarreyes3]

This will help me with tables that have a lot of data 👍

[tonytomov]

Not sure what is happen, but the code works fine with jQueryUI and Bootstrap5 css.
As for the height auto - the resizeGrid does not resize the height if the height is auto.

I have little fine tune the code where we add the wrappers automatically .

The code that works for me:

$.jgrid.extend({
	togglefullSize: function() {
		let t = $(this);
		let gbox = 	$("#gbox_" + t.attr('id'));
		let gboxw = gbox.width();
		if(!gbox.parent().parent().hasClass('gridresize')) {
			gbox.wrap("<div></div>");
			gbox.parent().wrap("<div style='width:"+gboxw+"' class='gridresize'></div>")
		}
		let cl = 'ui-jqgrid-full-size',
		gb = gbox.parent();

		if (!gb.hasClass(cl)) {
			if(t[0].p.height === 'auto' || t[0].p.height === '100%') {
				t[0].p.height="200";
			}
			gb.data('h', gb.height());
			gb.css('height', '');
		} else {	
			gb.height(gb.data('h'));
			gb.data('h', '');      
		}
		gb[gb.hasClass(cl) ? 'removeClass' : 'addClass'](cl);
		t.resizeGrid();    
		return t;
	}
});

and in this case you will need to rmove the html grid wrapper.
As for the height auto I have do the trick to replace auto with some value before to resizing