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
Related
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 playing with this example by Kendo: http://dojo.telerik.com/EneFe
I have modified it so that the rows are selectable (selectable:true).
I have added a button on the top which calls the grid.clearSelection() function.
This is supposed to clear all selection but it does not clear the selection of rows that are selected in the dropdown table. (Recreate: click on the first row "Nancy", expand it and click on "10258 - Austria", then click the "Clear Selection" button and only "Nancy" will clear)
Is the function not working properly or am I misusing it?
In any case - how can I achieve a total clearing of all selected rows?
This is because they are two separate grids. Check this:
http://dojo.telerik.com/EneFe/2
I am trying to reset column sorting (see image above) so that there is no down or up arrow.
I've tried $("#grid").data("kendoGrid").refresh() to redraw the grid but it doesn't unsort the column. Any thing else I can try beside refreshing my browser?
Try:
$("#grid").data("kendoGrid").dataSource.sort({});
Using extjs 4.1.1
I have a grid with lots of columns >20.
Initially, most of these columns are hidden.
If a user wants to unhide the column, they select the menu on any column, then select the "columns" choice, this expands another dropdown/dropout which shows all of the columns. Those with checkboxes next to them are shown.
My issue is this:
The columns in the dropdown are shown in the order in which they are defined/displayed in the grid. The order in which they are displayed in the grid has been chosen for a good reason( e.g. id as the first column). However, when a user wants to display one of the hidden columns, it is hard for them to find it in the list. This is because the list is sorted in the order the columns are defined. I want to sort the column dropdown/dropout list in alphabetical order, without effecting the order of the columns in the grid.
How can this done?
I think I found the solution to your question.
First of all I don't have the Ext JS 4.1.1. framework on my current PC. So I tried to figure out you problem reading the Ext JS 4.1.3. documentation available on Sencha's site. But I don't think that they have made drastical changes in this part of the framework between the two minor releases so my solution should work in your case too.
I have tried out my solution using JSFiddle. Unfortunately they did not have the 4.1.1. ext-all.css file, so I have linked manually the 4.0.2 file available at Sencha, so the menu is looking a bit missplaced.
The header menu and it's submenus are managed by the Ext.grid.header.Container class. The column submenu is constructed by the getColumnMenu method. The whole menu is purged and reconstructed on every drag and drop or other event which should affect the grid view. As a result it is enough to overwrite this method in order to solve the problem. Because the headercontainer class is too deep in the framework it is hard to extend it, so you have to make use of the Ext.base.override method.
The column submenu's menu items are created from the result of the
items = headerContainer.query('>gridcolumn[hideable]')
query. So you have to first sort alphabetically the result, before creating the menu items. I have added to the class the sortColumns method which does all the sorting stuff.
So here is what I did: link to my solution.
I hope that this is what you were looking for.
I want to delete column in devexpress grid without using Customization window. For example: by dropping column out of grid or there will be a X button on column that will delete it. Is it possible?
It is possible to drag-drop a particular ASPxGridView Column into the Customization Window or hide the Columns programmatically.
See the following Examples:
E3812
E2023
E3031
If you want to show/hide an individual Column while export, use the solution from the E3352 Example.