Resize jqGrid when browser is resized?
As a follow-up:
The previous code shown in this post was eventually abandoned because it was unreliable. I am now using the following API function to resize the grid, as recommended by the jqGrid documentation:
jQuery("#targetGrid").setGridWidth(width);
To do the actual resizing, a function implementing the following logic is bound to the window's resize event:Calculate the width of the grid using its parent's clientWidth and (if that is not available) its offsetWidth attribute.
Perform a sanity check to make sure width has changed more than x pixels (to work around some application-specific problems)
Finally, use setGridWidth() to change the grid's width
jQuery(window).bind('resize', function() {
// Get width of parent container
var width = jQuery(targetContainer).attr('clientWidth');
if (width == null || width < 1){
// For IE, revert to offsetWidth if necessary
width = jQuery(targetContainer).attr('offsetWidth');
}
width = width - 2; // Fudge factor to prevent horizontal scrollbars
if (width > 0 &&
// Only resize if new width exceeds a minimal threshold
// Fixes IE issue with in-place resizing when mousing-over frame bars
Math.abs(width - jQuery(targetGrid).width()) > 5)
{
jQuery(targetGrid).setGridWidth(width);
}
}).trigger('resize');
And example markup:<div id="grid_container">
<table id="grid"></table>
<div id="grid_pgr"></div>
</div>
Resizing a jqGrid when window resizes using UI.Layout
To set the width of the jqGrid, I'm using the following line of code without issue:
$('#myGrid').jqGrid('setGridWidth', newWidth);
myGrid
corresponds to the id of the HTML table that is used by jqGrid. Way to make jqGrid responsive on web browsers
jqGrid uses fixed width
value on many internal structures (divs, tables and so on). So one can't just set CSS width : 100%
. Nevertheless there are another way to do the same. One can register resize
event handler on window
object and to call setGridWidth
explicitly. The method adjust all internals structures of jqGrid to new width. So it would be clean method.
If you use autowidth: true
then jqGrid set the width of jqGrid to the width of it's parent only once. Inside of $(window).resize
handler we can get new (the current) width of the parent and reset the value of grid width
. The corresponding code will be the following
$(window).on("resize", function () {
var $grid = $("#list"),
newWidth = $grid.closest(".ui-jqgrid").parent().width();
$grid.jqGrid("setGridWidth", newWidth, true);
});
I used $("#list").closest(".ui-jqgrid")
instead of $("#list")
because jqGrid build some dives over the main <table>
element. $("#list").closest(".ui-jqgrid")
gives as the outer div which include all the elements of the grid.The modified fiddle demo demonstrates the code live.
jqGrid Column Chooser dialog is resizable but when resized the inner contents are not stretched on resize
You are right. Currently it's a problem in the column chooser.
It's better to make some fixes in the code of the columnChooser
method. Before all you can improve the situation with resizing by making some changes in the Column Chooser dialog after the dialog is created. For example with the following code
$(this).jqGrid('columnChooser',
{width: 550, msel_opts: {dividerLocation: 0.5}});
var columnChooser = $("#colchooser_" + $.jgrid.jqID(this.id));
columnChooser.css('min-width', columnChooser.width() + 'px');
var dialog = columnChooser.closest('div.ui-dialog');
columnChooser.closest('div.ui-dialog').css('min-width', dialog.width() + 'px');
var div = columnChooser.children('div:has(div.ui-multiselect)');
div.css('width', '100%');
var uiMultiselect = div.children('div.ui-multiselect');
uiMultiselect.css('width', '100%');
uiMultiselect.children('div.available').css({width: '49.9%'});
uiMultiselect.children('div.selected').css('width', '49.9%');
you will have fairly good results with the horizontal resizing (see the demo). In the way you can either solve or at least have improve the results of resizing.UPDATED: I posted here suggestions to make columnChooser really resizable. You can see the results on the demo.
Related Topics
JavaScript "Variable Variables": How to Assign Variable Based on Another Variable
How Do We Set Remote in Typeahead.Js
Cross Domain Localstorage with JavaScript
Do Browsers Parse JavaScript on Every Page Load
Subject VS Behaviorsubject VS Replaysubject in Angular
How to Getting Browser Current Locale Preference Using JavaScript
Why Do I Need to Await an Async Function When It Is Not Supposedly Returning a Promise
How to Reset the Scale/Zoom of a Web App on an Orientation Change on the Iphone
How to Remove a Table Row with Jquery
How to Calculate How Many Seconds Between Two Dates
Load "Vanilla" JavaScript Libraries into Node.Js
Why Is There a 'Null' Value in JavaScript
What's "This" in JavaScript Onclick
Efficient Way to Insert a Number into a Sorted Array of Numbers
Focus Next Element in Tab Index