I am trying to adjust the width of column in jqgrid with the size of text in that column.
I didn't find a solution by searching.
I tried the solution at this question: jqgrid column width auto. I have problem with the header now. When there is no horizontal scroll in the jqgrid the header is shorter than the body. Any idea?
Some time ago I wrote small jqGrid plugin with setColWidth method. It do what you need. The last version of the method you can download from github (jQuery.jqGrid.setColWidth.js file). In the answer there are an example of usage of the method. Another demo created for the answer demonstrates the usage of the method to set the width of every columns of the grid based on the width of maximal width of content in the column and in the column header.
Related
I use primefaces 5.2 and jsf 2.2.6 and I get a wrong width value in the columnResizeEvent when resizing the columns.
For the datatable I use the attribute resizeMode="expand", because I want to keep the size of the other columns the same when resizing a column.
But the problem is when I want the decrease the width of a column, I get a bigger value than the previous one, even though I decreased the width and even though in the user interface the column appears to have a smaller width as I want it to be.
When I don't use the attribute resizeMode on the datatable, the provided width from the ColumnResizeEvent is correct, but the size of the other columns are changed and I don't want that.
Is there a way to resize a column and keep the sizes of the others and at the same time to get a correct value of the column width?
So, it seemed that the problem was the widgetVar from the datatable, because I had several tables with the same value in the widgetVar for every single datatable and that's why it had the same clientId, because the same clientId was added to the DOM.
To find out more about the problem and solution, you can visit another post of mine, in which I want to use the same xhtml with a datatable for multiple tabs:
How to use the same datatable for all the tabs primefaces (resize not working in this case)
can we change the frozen column's header height in jqgrid?
I did that by:
grid.closest('div.ui-jqgrid-view').find('table.ui-jqgrid-htable th:first-child').css("height", "25px");
but it is not working!
any idea?
You don't posted more full code which you so I have to guess what one need to do in your situation.
In any way one should search for the header of the frozen column in another way. One can do either
var $fhDiv = grid.closest(".ui-jqgrid-view").find(">.frozen-div.ui-jqgrid-hdiv");
or
var $fhDiv = $(grid[0].grid.fhDiv);
To set the height of the header one have to set both the height of the div of the frozen header and the height of the row in which contains the headers:
$fhDiv.height(50).css("z-index", "1");
$fhDiv.find(">.ui-jqgrid-htable .ui-jqgrid-labels").height(50);
One can see that I set z-index of the div of the frozen header additionally. It could be required if you set large enough height value. The value of z-index, which one need to set, could be different depend on where you use jqGrid on your page. The value have to be large enough to place the div of the frozen header over the main grid.
I am facing issue on resizing the jqgrid headers. When i try to resize them, the headers dont match with the actual row data(as seen in the snap below).
I want the header rows to resize along with the data rows.
Please help.
I have uploaded the image on the following link: Image-describing-shrink-issue
Thanks,
AP
For changing Column Header width in jqgrid use below code
$('.ui-jqgrid-labels > th:eq(2)').css('width','400px');
For changing Column cells width in jqgrid use below code
$('#gridId tr').find("td:eq(2)").each(function(){$(this).css('width','400px');});
How to change header and column width in jqgrid code example.
Is there a way to make a jqGrid column autosize so that the contents of a grid cell isn't cut off if it is too long?
There are no "autosize" feature in the jqGrid, but you can use text wrapping in the grid cells (see here) and in the column headers (see here).
I need to resize the JQGrid column at runtime.
For eg: the column width for the column was 100px when it is loaded. I need to change it to 200 afterwards.
Please help.
Unfortunately there is no way to do this using the jqGrid API. From the documentation:
As mentioned above the options in colModel can be get or set using the methods getColProp and setColProp. Below are options which can not be changed dynamically when the grid is constructed (If changed they do not have effect or will cause the grid errors). For some of these options there are methods available to change the value:
name
width
resizable
label (method avail.)