I built a table with a column with a " linked multiselect" filter, where the options of the second select depend on the first selection, and so on.
The problem is that as soon as I select an item, the filter dropdown close. I would like to close the popup when I finished all the selection.
I thought to intercept the onchange event in order to stop the propagation of the event. But it seems it's not possible.
Another option is to intercept the onClick event on the <option>, I tried but it didn't work.
Example:
https://codesandbox.io/s/8498m8ykxj
Luca
The popup container of the select (the options) is outside the filter dropdown.
Moving it inside (Select.getPopupContainer) solved the problem.
https://codesandbox.io/s/8498m8ykxj
I don't want to be that guy that does not understand what you are doing and gives advice. But if you need a multiple select, I would suggest to use a "multiple selection" input as you can find in the antd doc.
An other solution would be to use a Menu with chehkbox for each item. I think it would be much more easy to use.
That is just an idea.
Have a good day anyway
Related
I have a mat-select dropdown with more than 20 values. I have to select a value from the available list. The first 5 values are visible when the dropdown is clicked. After that, the values in the dropdown are not visible and unable to click.
cy.get('app-screen').find('#paper-code').click());
cy.contains('mat-option', 'AL019').should('be.visible').click();
Since the above code failed, updated the code as below.
cy.contains('mat-option', 'AL019').click();
This worked. But, will it get failed anytime later?
Another question, is how to get the selected option for mat-select?
It could fail later but it won't if you set the force option to true and avoid having to wait for an actionable state.
cy.contains('mat-option', 'AL019').click({ force:true });
If it does fail in the future, you want to know about it because there's a regression in the app.
Don't {force:true} unless you really really need to, because it will stop your test catching such regressions.
To test the value is selected may be as simple as
cy.get('app-screen').find('#paper-code').should('contain', 'AL019)
I have implemented a select2 multiselect for list of states in a application, and it works fine using typing the state names. But with Dragon NaturallySpeaking software if you speak in select2 to select a state, it only show the last char of what you spoke and do not autosearch, you have to press space to see the whole text and then press backspace to start the search, looks like some event does not fire when you speak than type. Not sure if there is any solution that I can try. I have tried to fire the change event manually.. but not working !
Since the select2 box is not Select and Say, you probably need to dictate into the dictation box and transfer it over. Or, write a script to take in the dictation, convert it to what you need, and then paste it to clipboard. Then go over to box and paste from clipboard. Let us know what worked . . .
I have added a check if the selected element class is select2-search__field then I trigger a $(activeElement).trigger('change') in that element. that seems doing the job
SmartGWT has this property for a TreeGrid object:
employeeTreeGrid.setSelectionAppearance(SelectionAppearance.CHECKBOX);
This by default 'prepends' every nodes (including root) with checkbox.
(Just making myself clear.)
Also, I am aware of this similar solved question:
GWT tree with checkbox:How to get all checked tree items?
However, I do not seek this kind of solution..
What I'm looking for is a more efficient way, where I don't have to loop through 1000 items.
Is there any way to do this, if possible, using the widget I am using now?
If not, is there any other way, using other widget?
Thank you very much!
I think as you use SelectionAppearance.CHECKBOX you tell to the grid that the selected records are marked by the checkbox field value. So every time you check one you select a record.
You can get the set of selected records by either getSelection() method or getSelectedRecords(boolean) because of deprecation of the previuous one.
You can have a look at the code of this example of the smartgwt showcase.
This is probably jquery basics, but I can't find a solution after much googling.
How do you attach "non-events" to elements inserted in the DOM?
For events, like click, we can use live() or bind().
How would you, for instance, initialize tabs() or addClass() to a new element?
Specifically, I'm trying to get tabs() to work in the content of an ajax loaded dialog, but I think the correct solution should be applicable to any situation.
I did see a trick that involved $('body').mousemove() which did work, but that is still binding to an event and obviously a hack.
For instance, how would you get addClass() to fire on a newly inserted table row?
I mean to do this implicitly, meaning that I don't want to write out specific instructions for every event that adds nodes to the dom, I just want it to "run in the background".
Let me know if this needs clarification, I see many similar questions on SO but no answers that have helped.
EDIT: Simple example: A page calls $('a').addClass('highlight') which works on all anchors in the page. A new anchor is then added to the page dynamically by jQuery, but does not get the class added.
EDIT: I have tried all kinds of bind(), trigger() and change() methods but I'm afraid I'm barking up the wrong tree.
you need to look at livequery it will allow you to apply things to newly added elements
also if your adding the element you can do
$('body')append('<div>some content</div>').tabs();
or something like that
I know that I may contradicting your "non-event" rule here, but just by saying that you want something "triggered", you're already implying some kind of event.
In that case, may I suggest jQuery custom events? You may want to create a custom event, then trigger it manually somewhere in your code. It's not automatic (like when you add a row, BOOM, it fires™), but that's the closest thing I can think of with what you were describing.
Specifically, you may want to look at jQuery's .bind() and .trigger() methods.
I want the user to be able to trigger sorting mode. It's because I find that with long lists, updating takes long. If updating the position happens every time an item is dropped, it'd be slow and expensive.
This means that when they trigger the sorting mode, let's say by clicking on Start sorting, that's when I apply the .sortable(...) to the list I want them to sort.
My problem lies in these:
How do I disable the automatic update after everytime an item is dropped?
If the user decides that they don't want to sort it after all, how do I cancel it?
Thanks!
If you have a button that you want to use to "Start Sorting" the sortable, I would recommend this approach, assuming you have a DIV with an ID of "MyList"...
On document load or Init, create the sortable and deactivate it...
$(init);
function init() {
$("#MyLIst").sortable();
$("#MyLIst").sortable("disable");
}
Then when the user clicks the "Start Sorting" button...
$("#MyLIst").sortable("enable");
At this point I would prefer to change the "Start Sorting" button to "Finish Sorting", and when this button is clicked...
$("#MyLIst").sortable("disable");
I know this is an old question so I point out that this uses the latest JQuery as described here. I am not sure what the minimum version is that would allow for this to work.