Home › Forums › Guriddo jqGrid JS › Help › How do you have jqGrid re-calculated the column width?
This topic contains 7 replies, has 2 voices, and was last updated by guriddo.support 2 years, 1 month ago.
I am trying to add a font size increase/decrease function. I can use jquery.css() to change the font size, for example,
with the demo
http://www.guriddo.net/demo/bootstrap/loading_data/array/index.html
I can run the below code in the console
$(‘#gbox_jqGrid’).css(‘font-size’, ‘8px’)
the grid font size is increased, but how can I have the jqGrid change the column width depending on the font size?
Thanks.
Hello,
Not sure that I understand the question. You can use the GridWidth function to set the new width of the grid based on the new settings. The font-size just change the size of the font and not the width
Maybe you want to know how to change the font-size based on the width(this is done via google search)
Kind Regards,
Will
Guriddo Support Team
Hi,
I want to change font-size dynamically. In my grid, all columns’ width are specified. If there is not enough space, a horizontal scroll bar will appear.
In below demo code, I can change font size
http://output.jsbin.com/netadu
$(‘.demo-jqgrid-container’).css(‘font-size’, ‘6px’)
Original
Smaller font size
If the font size is decreased, I need a way to update the column size, rather than whole grid width. I use horizontal scroll bar if there is not enough width for grid. But I want to the each column width is adjusted when font size changed.
Some functions like
for each column:
var originalWidth = $(‘.demo-jqgrid-container’).jqgrid(‘getColumnWidth’, ‘CategoryName’);
var newWidth = originalWidth * 0.8;
$(‘.demo-jqgrid-container’).jqgrid(‘setColumnWidth’, newwidth);
Thanks.
Hello,
You can use getGridParam method to get the colModel property.
Loop throught this array in which every object has a width Property to get the actual width and use the method resizeColumn with parameters column name(or index) and the new width.
1 2 3 4 5 6 7 |
var colModel = $("#grid").jqGrid('getGridParam', 'colModel'); for( var j = 0; j<colModel.length; j++ ) { if( colModel[j].hasOwnProperty( width ) ) { var width = parseInt(colModel[j].width,10); $("#grid").jqGrid('resizeColumn', colModel[j].name, width*0.8); } } |
Hope this helps
Regards,
Guriddo Support Team
I tried ‘resizeColumn’ function with my demo code, but I got an error
Uncaught TypeError: Cannot read property ‘colModel’ of undefined(…)
http://output.jsbin.com/netadu
$(‘.demo-jqgrid-container’).jqGrid(‘resizeColumn’, ‘categoryName’, 60);
My demo code refers v 5.2.0
Guriddo jqGrid JS – v5.2.0 – 2016-11-21
Thanks.
Hello,
You should execute the method associated with the grid and not to the container.
The expression :
1 2 3 |
... $('.demo-jqgrid-container').jqGrid('resizeColumn', 'categoryName', 60); ... |
is not correct.
The correct code is:
1 2 3 |
... $('#demo-jqgrid').jqGrid('resizeColumn', 'categoryName', 60); ... |
Please note the difference
Kind Regards
Will
Guriddo Support Team
Thank you, it was my bad.
But the column width is not changed when I run the below code in the console.
http://output.jsbin.com/netadu
$(‘#demo-jqgrid’).jqGrid(‘resizeColumn’, ‘categoryName’, 20);
$(‘#demo-jqgrid’).jqGrid(‘resizeColumn’, ‘categoryName’, 200);
Thanks.
Hello,
Using a console to set something is not a prefered way.
The method work for us – this is tested.
Setting the column to width 20 will not work. The min column width is defined in minColWidth and default to 33.
Your example will work if you define two buttons and within document ready do:
1 2 3 4 5 6 7 8 9 10 |
$(document).ready(function () { $("#jqGrid").jqGrid({...}); $("#increase").on('click', function() { $("#jqGrid").jqGrid('resizeColumn', 'ProductName', 200 ); }); $("#decrease").on('click', function() { $("#jqGrid").jqGrid('resizeColumn', 'ProductName', 80 ); }); ... |
Kind Regards,
Will
Guriddo Support Team
You must be logged in to reply to this topic.
Copyright 2014 TriRand LtdAll Rights ReservedRSS
Back to Top