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
Related
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.
Semi-newbie to jQuery; just can't quite get this...
I have a list of items on a page, and I want to insert a new item at the top of the list by (a) sliding the existing items down and (b) fading the new item into its position at the top of the list. I can get the new item inserted into the list, but so far all the effects I've gotten to work are things like $('#theList').prepend(theNewItem).hide().fadeIn(1000);, which fades in the entire set of items, including the new one, and doesn't do anything about the sliding.
Of course (?), part of my problem is that I need to be applying the .fadeIn (and, presumably, the .slideUp) methods to the new item, not the whole list, but I can't seem to get my hands on it. I can get the ID of the new item, but it's not showing up in the DOM after the prepend (at least, console.log('#theNewItemsID') is returning an empty list).
Any advice out there? Thanks much!
How about
$('#theList').prepend(theNewItem).children(':first').hide().fadeIn(1000);
Demo: http://jsfiddle.net/gaby/CrjQF/
Alternative
If the variable theNewItem holds a jQuery object then you can also use the .prependTo()docs method to skip the filtering
theNewItem.prependTo('#theList').hide().fadeIn(1000);
demo: http://jsfiddle.net/gaby/CrjQF/1/
Explanation
It happend because your initial selector is the #theList so the chained commands refer to that. Using the .children()docs method combined with :firstdocs selector we reduce the selected items to the first child of #theList (the newly added)
I want to have a AJAX Function of implementing a chained menu + a result table.
What i need to do:
Firstly, the page populate automatically a vertical menu from MySQL and a result table.
Secondly, when i click an item in the menu, it displays a submenu in a fixed area in the page and a new result table.
Thirdly, when i click an item in the submenu, it displays a sub-submenu in another fixed area in this page and a new result table.
Last, when i click an item in the sub-submenu, it displays a result table.
All the result tables are in the same position. It changes depending on the click in the menus.
I'm lost in how to do that. Do you any ideas about how to implement this? Thanks so much.
Edit:
The effect is a little like this: effect
Your First, Second, Third, Last very much looks like visualjquery.com
I believe it is written in Javascript+jQuery, so you could learn from its source.
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.
Ok, so I want an autocomplete dropdown with linkbuttons as selections. So, the user puts the cursor in the "text box" and is greated with a list of options. They can either start typing to narrow down the list, or select one of the options on the list. As soon as they click (or press enter) the dataset this is linked to will be filtered by the selection.
Ok, is this as easy as wrapping an AJAX autocomplete around a dropdown? No? (Please?)
This widget can be made with three items: a text input, button input, and an unordered list to hold the results.
__________ _
|__________||v|__ <-- text and button
| | <-- ul (styled to appear relative to text input)
| |
| |
|______________|
ul shown on:
'keyUp' event of the text input (if value is non-empty)
'click' event of the button input (if currently not visible)
ul hidden on:
'click' event of the button input (if currently visible)
'click' event of list items
When the ul is shown or the 'keyUp' event of the text input is triggered an AJAX call to the server needs to be made to update the list.
On success the results should be placed in the ul. When creating the list items they should have a 'click' event attached to them that sets the text input value and hides the ul (may have to add a link inside the li to attach the event to).
The hardest part is really the CSS. The JavaScript is simple especially with a solid library like prototype that supports multiple browsers.
You will probably want to support some IDs for the items, so you can add some hidden inputs to each list item with the id and next to the text input to store the selected items ID.
You'll have to handle the OnSelectedIndexChanged event of your drop down list to rebind your dataset based on the users selection. If you want the filtering to happen in an asynch postback, wrap the dataset (or datagrid I'm assuming) and your drop down in an UpdatePanel. That is one way to do it anyhow.
I am not entirely sure what you want, but the Ra-Ajax AutoCompleter definitely have support for having "controls" within itself. You can see that in the search box at Stacked in fact (upper right corner) where we're using links. But this could also be LinkButtons if you wish...
Disclaimer; I work with Ra-Ajax...
In my opinion, you shouldn't use AJAX for this at all.
here's why:
(1) On focus: ALL the options that he can select are shown in the dropdown. This means that all possible options are already sent to the client.
(2) If the user types something in, the number of entries in the drop down are filtered down to match. This can easily be done on the client side. Being ajax'y and going back to the server at this point will just slow things down.
phpguru.org has a control which is 'almost exactly' what you need:
http://www.phpguru.org/static/AutoComplete.html#demo
It differs slightly from what you need in that it shows the dropdown on double-click instead of on focus. That should be fairly easy to modify.
I hope this helps.