Column header shows arrow icon after sortable is false in ExtJs grid - sorting

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.

Related

extjs column sort & sort arrow icon

I have a list of projects. When I click on a column header, the column is sorted and a sort arrow icon appears in the column header. However, the column keeps the sort and the sort arrow icon even after filtering the records (by entering text in the filter textfield and pressing the Filter button). I want the sort and the sort arrow icon to be removed from the column each time I filter the records. I have found some posts about clearing the sort arrow icon when a grid reloads (see links below). But how can I apply this to my situation? Any tips would be much appreciated.
http://www.sencha.com/forum/showthread.php?48437-Help-How-to-remove-sort-field-when-reload-grid
http://www.sencha.com/forum/showthread.php?3098-Clear-grid-s-sort-arrow-icon
In Ext JS 4.x you can just clear the sorters on the grid before you filter.
grid.store.sorters.clear();
grid.store.filter("name", "Lisa");
Here is a working fiddle:
http://jsfiddle.net/Vandeplas/5aKdc/
UPDATE:
if you don't filter/make a change you can force the UI to update by using:
grid.view.refresh();
Example: http://jsfiddle.net/Vandeplas/5aKdc/3/
Use following options at column model (ExtJs 3.4)
menuDisabled:true //there will be no any menu
sortable:false // there will be menu but disabled sorting option

Client side paging on Jqgrid?

could anyone tell me how to implement client side paging on jqgrid?
Currently, my pager just shows one page which is an error. However, if I change the number of records per page using the drop down, the grid is updated accordingly. But I am unable to navigate thru the pages.
Thanks in advance
I suppose that you fill the grid in the wrong way. You don't included any code in your question, so I can only guess that you use addRowData method to fill the grid. If it's so, then you should know that the usage of addRowData method it the worst and the slowest way to fill the grid which I know.
The best way in case of datatype: 'local' is to use data option of jqGrid in combination with gridview: true. It sorts the data from the data parameter corresponds with sortname and sortorder options, create jqGrid and display the first page of the grid (the size of the page defines rowNum option). The value of data parameter should be array of items which represent the grid rows. Every item should contains properties with the names like the name property of colModel. Additionally every item of data should contains id property which unique value will be used as id attribute of rows (id of <tr> elements).

how to reorder columns in jqgrid by dragging column headers

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.

jqGrid: set column property dynamically

I need to show/hide columns in jqGrid and to filter grid results.
For hiding and showing I use global array on the page. It keeps state.
For searching and filtering I use build-in filter dialog.
For invisible columns I set property "search" for "false"(nobody wants to sort results if he doesn't see it) so...there is no such column in the filter list. But when I show any column that was hidden(I call $("#jqgrid").showCol(colName);) then this column doesn't appear in the filter list. Of course, I have to change column's "search" property. But how??? Is it possible?
Thanks in advance

Make only certain columns editable in SlickGrid

I have a grid with multiple columns and I use the first column for a row label. I looked at the example for making the grid editable, but that appears to make the whole grid editable. Is there away to specify a certain column(s) only?
Got it! By not setting the editor property on the column object the column is non-editable.

Resources