I'm looking for a Javascript multiselect to use on my Spring Roo / Web MVC project, and worried that I could spend a while adding a widget from a library that then breaks other stuff. Requirements:
Prettier and more functional than the standard Dojo multiselect which Roo uses when scaffolding ManyToMany relationships, ie the user shouldn't have to hold down ctrl or shift to select more than one item.
Plays nicely with the javascript that is already used in the Roo scaffolding - so I guess that means first prize is something built on top of Dojo, although I'm not completely against adding other libraries.
Relatively self-contained... the less of my own javascript lying around, the better.
I'm aware that there are different styles of multiselect widget, eg an "available" list and a "selected" list vs a single list with select/deselect checkboxes vs autocomplete combobox... I'm open to any - it just has to be better than what I get for free with Roo.
Have you looked in dojox.form? Does CheckedMultiSelect help?
I know this is a bit late in the game as you may have finished your project, but for future, I had problems with multiSelect widgets as those I was testing were modifying DOM so <select multiple="multiple">
<option>...</option>
....
</select>
was effectively changed to something different like<div id="...">
<input>...
</div>
I found one widget which works differently: it hides original select and creates its' own element and when user selects or deselects element it syncs its' state with original select.
It is called dropdown-check-list and here is the link dropdown-check-list
This way you can use original select for e.g. Spring binding.
Related
is there a class similar to a SelectWidget which allows to select multiple items from a list in the OOUI library? I want to use that in a MediaWiki VisualEditor instance I'm extending.
I guess I can also rewrite SelectWidget myself, but yeah maybe there's a solution already.
OOUI appears to have only CapsuleMultiselectWidget (tag list / capsule control).
Also, you should note this is a JS-only widget (no PHP implementation, or "PHP pendant" in OOUI-speak).
After quite an extensive search, it appears there's no simpler multi-select dropdown - there are a few open tasks to implement one:
T91147: Create a generalised multi-select widget
T108489: Generalise CapsuleMultiselectWidget into a MultiselectWidget
T117782: Implement CheckboxMultiselectWidget (and CheckboxMultiselectInputWidget)
JIRA has a nice search tool built into the issue tracker -- date-pickers, multi-select label pickers, number filters (min/max), and the like. For the label filter specifically, I'm wondering if this is a feature that Atlassian home-rolled; or did they use a plug-and-play framework that I too can add to my site; or something in between? I realize there's some back-end stuff that needs to happen in order to populate the list, but the UI element itself looks really slick.
The image below, from jira.atlassian.com, shows the label filter I'm interested in.
I tried pulling apart the source on the page, but I only found things that appear to be unrelated: AUI (Atlassian's UI standards?) and AJS (a low-level jQuery-esque library?).
I think that this plugin is the one you need. But you still will need to do the backend magic to ensure it works.
http://harvesthq.github.io/chosen/
The 'parameterized' builds in Jenkins are a bit limited. What if I want to have options that are related to one another?
For example 2 drop down lists. The selection from the first one controls the options in the second...
I don't really see any prescribed way to implement this, but a thought (and it feels super-hacky) would be to use javascript.
I've noticed you can enter <script> tags in the description attribute of parameters. Maybe a place to drop in some js? Also looks like prototype.js ships with the system.
So just how bad an idea is that, or is there a 'correct' way to do such a thing?
Check out the Active Choices Plugin it does exactly what you're looking for:
jenkins-ci.org - Active Choices Plugin
github.com - Active Choices Plugin
A Jenkins UI plugin for generating and rendering multiple value
options for a job parameter. The parameter options can be dynamically
generated from a Groovy script and can respond to changes in other job
parameters. The value options can be rendered as combo-boxes,
check-boxes, radio-buttons or rich HTML. Active Choices strives to
provide in a single plugin functionality found scattered among several
pre-existing plugins and some unique capabilities that are not
available yet.
The Active Choices plug-in provides additional Jenkins
parameter types that can be rendered as user interface (UI) controls
in job forms.
Once the plugin is installed three new parameter types become
available:
Active Choices Parameter
Active Choices Reactive Parameter
Active Choices Reactive Reference Parameter
Active Choices parameters allow users to select value(s) for a job parameter. Parameter values can be:
dynamically generated (using Groovy or a Scriptler script)
dynamically updated based on other UI parameters
multi-valued (can have more than one value)
rendered with a variety of UI controls, including dynamic HTML
I think you would be able to accomplish your listed example with the following dynamic parameters plugin without using javascript: https://github.com/tekante/Dynamic-Jenkins-Parameter/wiki. I have not personally used the plugin as a disclaimer. It looks like it will probably need to be built first based on what I have seen in the GitHub repo and the fact that I cannot find it on the official Jenkins plugin page.
We're doing a project in Angular.js and the Mockups we're getting from our UX person heavily use interactive popovers / callouts.
The problem is that I can't seem to map these on to angular concepts in a clean way. Conceptually they require their own templates, controllers, and they need to be created and destroyed all over the page. Overlapping elements without changing the layout.
Bootstrap modals aren't seen as an acceptable alternative. The founders are really keen on having interactive dialogs that point at specific elements on the page.
Is there something that can accomplish this? Or do you have any tips?
I would implement a directive or set of directives that you can show on focus or blur or mouseover of other elements. Depending on your implementation, you might be able to get away with just one directive that opens onFocus or onBLur. Angular 1.2 supports ng-focus, ng-mouseover, and ng-blur which you can leverage to do something like this.
<div class="check-thing">
<button class="checkmark" ng-mouseenter="showModal = true" ng-mouseleave="showModal = false"></button>
<modal ng-show="showModal" model="modal-model"></modal>
</div>
Then just have the form in the directive populate a two-way bound modal-model, or fire a callback when the user clicks okay that the controller waits for. It might even be better to just make the whole checker thing a directive and use them in a repeat.
Beware, none of this will be very friendly on a tablet or phone as they don't readily support hovers.
Have you looked at the AngularUI Bootstrap modals? (http://angular-ui.github.io/bootstrap/#/modal) They fit very well into AngularJS and can really be styled into almost any appearance you want. Passing data in and getting data out is very easy. Most UX people don't seem to understand how the web works (mine doesn't seem to anyway) and these have been a real savior for me and my team.
I know this is an older post but since an answer was never selected I would like to point out a possible solution that I had come across recently.
The Angular UI BS Popover allows you to have it align with the element you are targeting, which can be click, hoover, and focus.
For content you have the choice between text, HTML formatted string and template. Based on the question, the template is likely the one that would be used to allow the content to be dynamic and include interaction.
You can find more information and a demo on how it works at: https://angular-ui.github.io/bootstrap/
I am using dojo script to create custom dropdown list. when I create dropdown,
dojo.forEach(tags, function(tag) {
var option = dojo.create("option", {
innerHTML: tag.name
});
dojo.place(option, Select);
});
});
I create this drop-down to achieve the autocomplete.
Now the problem is I would like some of the opitions disabled, so user cannot select them.
how can I do this?
AFAIK and was trying there is not such a possibility. I think it makes very little sense to mix autocomplete with disabled values. Possible solutions:
Get rid of autocomplete feature and use dijit.form.Select or native Select, both works fine with <option disabled="true"></option>.
Use dijit.form.FilteringSelect and don't add or dynamically remove options you want to disable.
Please note that dijit.form.FilteringSelect and dijit.form.ComboBox are primarily designed to work with model based on API of dojo.data and from Dojo 1.7 also dojo.store. You should update Model (dojo.data/dojo.store) because View (FilteringSelect/ComboBox) is observing the model and updates UI when needed. See my jsFiddle examples.
N.B.: If you are not familiar with dojo.data API and you can use the latest version of Dojo don't bother to dive into dojo.data API and start with dojo.store. It's terribly wrong and complicated way to manage model via dojo.data.