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.)
Related
I am new to JQGRID. I have a grid. I want the column width should be equal to the maximum value of the grid of the column heading whichever is bigger.
It's not full clear what you mean and which version/fork of jqGrid you use. Free jqGrid is the fork which I develop. It contains the feature for automatic resizing of columns on double-click between the column headers or direct by loading. See the wiki article for additional information.
If I correctly understand your problem then you should add cmTemplate: { autoResizable: true } option to set autoResizable: true property in every column and to add autoresizeOnLoad: true option jqGrid to automatically resize all columns after loading the data.
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.
jqgrid doc in here contains:
method allow to reorder the grid columns using the mouse. The only necessary setting in this case is to set the sortable option in jqGrid to true.
I have sortable: true but columns cannot reordered by dragging headers by mouse. How to re-order columns by dragging columns headers or other way without using column chooser ?
To implement sortable columns is really easy. You should just follow the documentation. You should just
include jquery-ui.min.js additionally to jquery-ui.css which are always required. The most people have the file already included because of usage jQuery UI Widgets like Datepicker, Autocomplete, Tabs and so on.
add sortable: true option to the grid.
Now you can already (see the demo) drag the column header and drop it on another position.
I want to set the JQGRID row bgcolor depends upon the condition? How to do it? Im using php.
Thanks in advance,
look at jqGrid Coloring an entire line in Grid based upon a cells value. You should examine current row values after data loading (inside of loadComplete for example). For the elements where you want change the background-color you should remove 'ui-widget-content' css class and then add another class which defines the color which you want.
I'm using a jqGrid, and it gets populated fine. From the UI perspective, one of the columns in the jqGrid is editable. How can I make one of the columns as editable (say like a text box)?
The reason is, in my case when the grid successfully loads, the UI is going to show one of the column's values as editable.
If you're looking to edit the column values directly in the grid, similarly to how you might in Excel, look into the inline editing API:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing&s[]=inline
In colmodel, you have to specify editable: true.Provide edit action link in editURL:... option of jqgrid.
you have to get the "id" of that column and then remove 'disabled' attribute on that.
for example -
$('#idofthatcolumn').removeAttr('disabled');
OR
$('#idofthatcolumn').removeAttr('readonly');
In your colmodel you should specify editable as true i.e, editable:true and specify the editUrl:'localhost:8080/yourApp'
Also if you want to store it in the client side, then specify it as editUrl:'clientArray'