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.
Related
I'm using Primefaces' selectManyMenu to display a list of hundreds of items. I've also included a filter on top. The issue is that when I select, say, the 200th item in the list, I have to manually scroll down to the 200th item each time to see if it has been checked.
I want it so that whenever I select an item, it moves to the top of the menu, so that it is easy to view all the selected items from that list at the top without having to scroll down and up all the time.
Any suggestions?
Looks like your component is getting updated when selecting or unselecting an item, and that's the reason you're reloading the list and losing your scroll position.
Else, it looks like you could use a workround for this. Something like
Catch the select/unselect/change event and trigger a backing Bean function where
You rearrange you list of items sot that the selected ones will be pushed first
oncomplete, you will update your selectManyMenu component.
By the way, maybe it's time to think again if you're using the right component and UX practice. and I have the impression that selectManyMenu is not meant to be used with lists of 200+ items. Personally I think you should avoid using a list that will have to scroll down, for selectMany components. For example you could use another component like a pickList
I have a column in a Google spreadsheet with data validation, that makes a drop down menu available when editing existing rows. Occasionally though contributors create new rows at the bottom of the doc and this validation is lost.
I would like to keep this validatation in the column even in newly created rows (excluding the header row).
I have seen much of this discussion throughout stackoverflow and google help forums, but still cannot find a clear answer.
My hunch is that this would involve Google Apps Acript using an onEdit trigger and then either paint formatting or a combination of the confusing class DataValidationBuilder. (https://developers.google.com/apps-script/reference/spreadsheet/data-validation-builder) but I'm not sure beyond that.
While not necessarily elegant I found the following to work:
create your validation on the entire column
once that's done click the cell(s) that represent the heading, select data / validation, and then click on 'remove validation' on that single cell.
This way any newly inserted rows will inherit the validation set up on the entire column and you don't have to always be reminded that your heading isn't a valid value.
onEdit trigger which uses Range.getDataValidation() and Range.setDataValidation() to copy the rule from an existing row to the new row
While in the data validation dialog screen you can manually enter the range as "Sheet1!A:A" to apply the formula to all of column A.
This also includes new rows added afterwards
I'm not sure if this is a new feature but this worked. Set the validation as list from interval and interval as:
'sheet'!C2:C
This includes all new rows excluding title(first row)
I have a UI that looks similar to the mail app. A table view along the left with a single column of items. When one of the those items on the left is selected, details about that item are shown on the right.
When some event occurs in my app that requires the data in the left table view to be reloaded, the current selection is lost and then the right detail view and left master view get out of sync.
The way i hoped to solve this problem was, when it was time to reload the table data, I would:
1. Save the current selected item
2. reload the table data
3. Handle a delegate method or notification that let me know when the reloading was done.
4. Re-select the proper item by finding it in the new list of items in the table.
Unfortunately I cannot find any way to determine when the table is done reloading. Is there a. any way to figure this out, or b. a more elegant solution to this problem?
thanks.
update: In case my problem was unclear, imagine you are in the mail app and you have some message selected. That summary cell is shown as selected on the left, and the details of the message are shown on the right. Suppose new mail comes in which appear as new cells at the top of the table. How is the message you are currently viewing preserved, and not de-selected?
reloadData is something of a sledgehammer. 10.7 offers a better solution.
Instead of using reloadData, when you have new rows to add, use insertRowsAtIndexes:withAnimation: . When you have rows to delete, use removeRowsAtIndexes:withAnimation: . And, of course, if an existing row has changed, there's reloadDataForRowIndexes:columnIndexes.
These should remember the selection for you (at least, the equivalents on iOS do).
If you can't target 10.7, some of the other suggestions will probably help out. noteNumberOfRowsChanged may also be helpful but I've not actually used it.
You can save selection on tableView(_:shouldSelectRow:) then select the row right after you create the cell in tableView(_:viewFor:row:) using selectRowIndexes(_:byExtendingSelection:).
It is pretty reliable no matter how / when / how many times you reload the table.
I'm working on an InfoPath 2007 form. I have two drop-down lists and i need the second to be populated with items bases on the value chosen in the first list. I use c# to populate the drop-dpwn lists from external sources. I've tried to use the OnChange event to make all this, but the second list is still empty.
If anyone knows, please tell me.
You can filter the entries for the second drop-down list based on your first list (but only if the entries are based on a data source, not manually entered).
Bring up the properties window for
your second drop-down list.
Select your data source.
Click on the button to the right of the Entries text box.
Select the repeating node you wish to use for the basis of your list entry.
Click the Filter Data button. From here you can enter a filter to limit the entries displayed based on the value of your first drop-down list.
Your question was a bit ambiguous. You may be trying to populate a secondary data source based off of your first drop-down list. This should work fine with an OnChange event. Can you post the code you are using to do this?
Some additional tips that may help:
The change event will not fire until focus moves off of the list box. So, for the second drop down to populate, you will need to set the first drop-down then hit tab or click elsewhere in the form.
I don't know the size or nature of the data source you are using for the second drop-down list, but you may consider downloading the entire data source and filter it using the method I described above. This may be a better solution as you won't need to make a database query between entering the first list box and the second one.
I have a Silverlight 2.0 DataGrid that contains a list of items that needs to be refreshed in an interval to display the up-to-the-minute information. There are items in this grid that may be added and may be removed while the screen is being displayed to the current user. For Example:
If grid looks like the following, then after a minute the data needs to be refreshed because another user has added a 4th entry. (notice the sort is assending by Last Name)
Data Grid http://img16.imageshack.us/img16/1667/datagrid.jpg
Then when I get the new data set and set it to the datagrid's DataSource property, it resorts the array based on my first column like so:
Data Grid2 http://img19.imageshack.us/img19/1294/datagridb.jpg
Is there any way to reapply the sort after the data source has been updated? I'd like to save the fact that the data grid is sorted by last name, then update the data source, and then reapply the sort to the data grid. So, in the end the datagrid would look like the following:
Data Grid3 http://img13.imageshack.us/img13/4636/datagrid2.jpg
These screen shots are of course not a Silverlight data grid, but this is for simplicity in explaining the situation.
Probably the best way to go about it is to use PagedCollectionViews, although I have not tested this out myself, these classes contain a property that stores the different sorting methods applied to them. I believe that you can probably grab the current sorting element from one collection, connect to the new collection, and apply the sorting to the new collection.
For a more in depth discussion on how this all works, you can follow the explanation here
I tried using PagedCollectionViews as well as CollectionViewSources (I used the new collection to overwrite the existing source collection).
My solution isn't the most elegant, but it works. When updating the source of the DataGrid I did my own change detection.
In other words, instead of blindly overwriting the source collection I iterated through the new collection, compared each item to the existing collection, and updated the existing items where possible.
Hope that helps.
After researching how to do this, I have figured it out. I tried to implement what the others said to try, but could not get it to work in Silverlight 2.0. Thus, I searched StackOverflow and Google for more answers. ScottLogic and CodeProject seemed to be what I was looking for but I couldn't get them to work fully. So with a bit of frustration and playing around with code, I finally arrived on the solution.
If the collection that you're using for your DataGrid's ItemsSource is ObservableCollection(Of T), you can get the ability of sorting for the object, plus you can update the collection dynamically at runtime, causing the grid to refresh with the item you insert. I've created a Google Code project that is GPL for you to checkout and download. Please note that I'm using the Microsoft Silverlight 2.0 DataGrid December 2008 Release for this project. I have linked to this download on the project page as well. (The dll's required are referenced from within a lib folder inside the project).
Enjoy!
Silverlight 2.0 DataGrid Sort Project on Google Code