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.
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 have an ExtJs GridPanel in which sortable is false in all the columns.
Then if I sort store by
this.store.sort('Column1','ASC');
then the arrow reappers .
Does sortable gets true?
Is this because I am sorting the store or anything else?
If it the reason different than that then what is the solution for removing the arrow?
I would appreciate any help on this.
The arrow is being shown because of the sorter in the store, which identifies a column in the grid which has the dataIndex equal to the property you are sorting, despite the sorting being disable on this column. In this case, you could override the getSortParam function in your column definition, like this:
getSortParam: Ext.emptyFn
And your column will no longer show the arrow in the header.
I am trying to create tabular report using JQGrid, JavaScript. I want to add a rowgroup header spanning whole row, and repeat this group using JQgrid and JavaScript. The data is going to come from JSON file.
I've already explored options of rowgroup using Jqgrid. But, instead of static header spanning, it gives header with expand/collapse function. It is not able to give Total for two rows in each column. Also I am not able to repeat leftmost column in it.
You can use plusicon and minusicon options which specify the icons used by jqGrid group. If you need to hold the icons hidden that the corresponding classes should have display: none prorty. For example you can use
groupingView: {
... // your other options
plusicon: "ui-helper-hidden",
minusicon: "ui-helper-hidden"
}
If you need customize the grouping row additionally, then you can use formatDisplayField callback. See the answer, this one, this post and this one.
I need to make toolbar search with select filter, that give ability to chose several items for one column. Is it possible to do this in jqgrid?
No, it is not possible in the current version of jqGrid.
The option multiple: true can be used in editoptions and it change the behavior of the form editing or the inline editing, but it will be ignored in the toolbar search.
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'