I have a dropdown containing 100+ options in it. Can it be paginated so that when user selects the dropdown it shows only 10 options with pager.Is there any angular plugin to do so.Thanks
I've personally never seen such a widget and i think it's a bit weird to be honest. The user wouldn't expect that behaviour from a dropdown which harm the usability quite a bit.
I would recomment to simply use a normal dropdown instead - if you think of a standard country-dropdown for example (Germany, France, Italy etc.) it holds around 100 entries as well but doesn't do some unexpected behaviour like pagination in it.
The standard select doesn't support this behaviour for sure and i'm not aware of any public widget that does.
So if you really want to do this you will probably have to implement it on your own.
Yes it can, but the pagination should happen a little bit special way. There is a plugin, called ngInfiniteScroll which does the pagination based on where additional content for a web page is appended dynamically to the bottom of the page as the user approaches the end of the content.
You may try to use this, but then you have to have your custom dropdown built. In this way you can achieve a convenient usage of a dropdown without showing 100+ hits on start.
ngInfiniteScroll website: https://sroze.github.io/ngInfiniteScroll/
Related
I'm pretty new to React Js, I have a requirement for building AutoComplete Multiselect dropdown.
Despite looking around for lot of examples,
I was suggested not use any third party libraries. And pretty
clueless how to start and proceed further.
My requirements are
Have an input text box for typing names.
Display sugggested name with checkbox.
Upon checking the names, they must be display in an with an 'X' symbol(remove item)
If I uncheck the name from the multiselect dropdown, it must be removed from the li.
If I Click the 'X' it should be removed from the li and uncheck the item from dropdown list.
And lastly , I need to display the selected items in the input fields like
I've been trying to implement this functionality but figure out how.
Can anyone please provide some reference and any guidance in implementing this functionality or any examples. It would be a great help.
Thanks
I'm not sure why the recommendation against third party libraries. These component can get complicated fast.
I recommend you use a third party. Don't reinvent the wheel!
Something like https://github.com/JedWatson/react-select will do what you want. It has been around for years and has over 300 contributors and 2 million weekly downloads.
I am using Angular with Node to create a Web-APP. The back-end will be building a standard JSON RESTful API, and that is going normally. As for the front end, I am running into a little bit of problems. So my website is designed in a way where there are essentially TWO main displays. Eg. Two windows inside the website that can change frequently. I have NO IDEA how I should implement this! So far I have split my website into directives, eg each "display window" is its own directive, and I was thinking maybe use $localStorage and just have a bunch of ng-ifs inside each HTML file for each directive, switching the view depending on some value in $localStorage. Eg. Person clicks a button, some value in local storage changes to 10, an ng-if inside the directive displays the correct "view" inside the display because the value 10 represents some view. The problem is that I will have to put ALL my HTML in one file, and Im not even sure if this will work! Any suggestions? Any help appreciated!
PS. The two "main displays" can change without the other one changing, hence why I didnt want to group them into 1 view. They are separate entities, and programatically it makes more sense to split them up! They are also physically seperated on the screen (bottom right and top right, seperated by a bar)
For displaying two separates views in the same page, you have to use AngularUI Router because the native ngView directive only supports one.
I'm using select2 in my angular web application, and i'm trying to achieve
a custom format selection for multiple selection mode, that as far as i know
is not supported by select2.
by default select2 in multiple selection mode, just puts in selection area all the selections side by side and when there is not enough space the selection area height is getting bigger.
what I'm trying to achieve is something like this:
"item1, item2, item3..." ("..." appears when there is not enough.)
I hope someone will suggest a reasonable solution for my needs,
Thanks,
Nadav.
as shown here: https://github.com/angular-ui/ui-select2 this directive is deprecated; there is a new directive here: https://github.com/angular-ui/ui-select, which appears to support multiple selections. Having said that, your question is not entirely clear and perhaps some more information would enable a better answer.
I have a requirement which requires me to use a single dialog with two tabs. Each tab should have a CustomMultiField (multiple sets of four fields). I do not know anything about EXT JS. Can some one point me to right direction where I can find something about requirement as above.
I have built custom components without any explicit understanding of Ext JS. To understand how to set up a dialog with tabs, look at the code for the page component in /libs/foundation/component/page. A directory of all the xytpes you can use, like MultiField, is here.
If you need something that behave like one, but is not necessarily huge specific ExtJS component or custom xtype, and you do not want to dig hundreds of Adobe ‘support’ pages, trying to find some piece of useful doc.
You can simply use multifield xtype and write 4 pure JS listeners, that does what you need.
I was wondering if there is a way to override the native functionality of the lookup field in Salesforce and replace it with a visualforce page. The reason I'm trying to override this button is because when the user does a look up, the look up returns everybody with that name. What we want to return is a list of all the contacts by account for the contact being searched.
Here's what I'm trying to achieve:
When the user clicks the lookup button my visualforce page will launch and allow the user to see the account and all the contacts of that account.
Is this even possible? What other ways would you suggest going about this?
Here's a screen shot of what I'm trying to change:
Thanks for all your help!
It sounds really like you just need to customise the columns on the lookup to make it better suited to your needs. If you go to Setup -> Customize -> Contacts -> Search Layouts, you'll see entries for Lookup Dialogs and Lookup Phone Dialogs, there you can edit the columns displayed in the lookup windows.
If you really need a custom solution:
You can't override the lookup page itself, but you could create a new visualforce page for your account, using <apex:detail> and other similar tags to make your life simpler. Then you could include a search section underneath, where a user can enter various search terms which you put into a dynamic SOQL query and then render the results for them to choose from.
yeah its possible by javascript as i did by visual force page that will show the records of related lists and upon selection id of that record passed to parent window by jscipt. and performed same functionality ..
As far as I know - NO.
As a workaround you can use JavaScript.
What we did in our situation? We implement everything in JavaScript. We created an inputText and right on the right of this inputText we placed image with this lookup icon. On image click we create ExtJS popup window (I think you can simply create VF page and show this page in popup window). After window was closed you fill in the inputText field.
There's no out-of-the-box override for this button, last I checked, so something custom would be required. If you're set on having a popup and do not want an inline solution, I'd recommend reviewing this tutorial to get familiar with some of the issues with popups in Visualforce.
But considering what you are looking to accomplish, you could also have your account and filtered list of all contacts associated with that account appear inline on your page when the user clicks a new, custom search button. Of course that page would itself be in Visualforce (or inline Visualforce in a standard page layout) - which you may or may not want to have to code and maintain.
The AJAX Toolkit might also be a good place to start if you want to go with a custom JavaScript button placed on a standard page layout.