I need the following functionally in material multi-select:
Once None is selected - all the checkboxes are unchecked and 'None' is obviously selected,
But once any value , other than 'None' is selected - the 'None' is unchecked and all the selected items are selected as usual.
Also None should be the preselect value incase nothing is selected...
So - the first issue i did in 2 ways :
1 - Added 'None' to my list and on the change function - deselecting all the rest
2 - Added another option markup with it's own logic
<mat-option #noneSelected (click)="toggleNone()" [value]="0">None</mat-option>
Problem is i don't know how to check and uncheck material items programmatically - i've tried with ref element - to get the dom element and check / uncheck it, but since it's material element - it's not that straight forward ....
example
You don't have to manipulate dom just use (selectionChange)event emitter to detect changes here's how it should be done
Related
I use TreeGrid to implement my filter with hierarchical data in multi-selection mode.
Sample
As you can see on the image above, the checkbox are checked for all three items. I would like to modify the parent checkbox(in this case "Default") to have some sort of selection indicator. If all children are selected, the checkbox will use a check mark as the indicator. If children are partially selected(not all), the checkbox will have ("-") sign to indicate that part of the items under this parent are selected and empty checkbox for zero item selected under parent.
I was trying implement this feature on my own, but i couldn't find a way to access the checkbox. Any idea?
I'm trying to create a wrapper component for material button-toggle-group. I should add a lot of custom styling for it, so it makes sense to do this in a component so I can import this component later rather than doing it every time. However, I've hit a snag. It is only possible to click the button one time, and then it is checked forever. Also, all buttons can be checked at the same time. What I'm wondering is:
How do I change the selected button when option is selected?
How can I use the boolean in the dataset to set one of the buttons to checked by default?
Also, how can I limit it to one selection at a time? I tried setting the "multiple"-parameter to false, but this does not seem to work.
I have provided what I have so far in a Stackblitz - for some reason this is not loading the material theme properly, but you can still see the problem and what I have so far:
https://stackblitz.com/edit/angular-b7rxxq
A mat-button-toggle-group is intended to be a group of several buttons... because your loop is on the mat-button-toggle-group you are creating two groups each containing one button.
Remove your loop from mat-button-toggle-group
<mat-button-toggle-group (change)="optionSelected($event)" multiple="false" [name]="label">
Add it to the mat-button-toggle so you have a yes and no in one mat-button-toggle-group... also use [checked]="option.value to default the value
<mat-button-toggle i18n="{{option.i18n}}" [value]="option.value" [checked]="option.value" *ngFor="let option of options" style="margin-left:15%">{{option.displayValue}}</mat-button-toggle>
Please Note: once your options are in a single group, only one will ever be selected at a time... once selected you cannot deselect... you will need to do it programmatically if you need the ability to deselect.
Stackblitz
https://stackblitz.com/edit/angular-rmn4k4?embed=1&file=src/app/toggle-wrapper/toggle-wrapper.component.html
I have an issue where I need to hide or remove options from a select2 dropdown when selected. These selections fill a list. I would rather not remove the option because if the user removes it from the freshly populated list then it should return to the dropdown with its place in the order restored. I've tried the following:
.select2-results .select2-disabled, .select2-results__option[aria-disabled=true] {
display: none;
}
$('#optionId').prop('disabled', true);
With the prop being set in the jQuery change block. I just can't get this piece.
I have figured it out. If the disable is wrapped like so:
$(#selectId).select2('destroy');
$(#optionId).prop('disabled', true);
$(#selectId).select2();
then the disabled setting will be honored by select2 and the the display none will make the item disappear. To make it reappear, just follow the same steps with the disabled property set to 'false'.
I am using Polymer paper-tabs - all working fine.
I want to programmatically select a paper-tab, and show it as selected/highlighted. Functionally there is no problem, but the tab is not showing "the correct colour" (=as highlighted).
I have used:
PaperTabs mypaperTabs=...
mypaperTabs.selected = "#mytab';
and
myTab.click();
The previously selected tab does correctly become unselected. So it is showing as all tabs as unselected. Is there something else I should be doing?
You need to assign the number of the tab to selected not the value of the id attributed.
For example:
mypaperTabs.selected = "1';
I have a kind of "widget" - a data table with some rich functionality like sorting, row selection and else.
In some cases (widget placement/nesting in DOM) clicks on it's rows are not triggered in iOS 7 Safari.
Widget is using jQuery 1.6.4
I can't publish a whole widget code (and you really wan't this to happen ;)), but I can narrow down a reproduction scenario to the following case:
Simple html table with some rows, two cols in each
First column contains a "checkbox" - simple div which is normally hidden and becomes visible, then parent row getting hovered. Visibility is triggered with CSS only
Every row has a click event handler. No mater what it does. In my example it will trigger an alert()
Table's parent is a block element with a fixed height and overflow-y set to auto
Table is bigger than it's parent, so, some table content is hidden and can be seen with scrolling
Here is a jsFiddle: http://jsfiddle.net/822eG/4/
On any desktop browser items are successfully hovered, click is triggered. On iOS7 hover is working but click is NOT triggered.
NOTE: On iOS you must tap twice to trigger click. First click will trigger hover and you'll see a "checkbox", then second tap must trigger a click, but it doesn't...
Any of those conditions is REQUIRED to reproduce an issue. Remove a single one and it starts working...
If you remove a "checkbox" appearance - click will work (http://jsfiddle.net/822eG/5/).
If you remove a height fix - it will work (http://jsfiddle.net/822eG/6/).
If you remove a overflow scrolling - it will work (http://jsfiddle.net/822eG/8/).
Any workaround is needed but functionality should be kept untouched. So, I can't remove "checkbox", size fix, hovering, clicking or overflow scrolling. Also, changing HTML markup is hardly to happen.
NOTE I've got a solution - see my answer below. But I still need a better workaround to keep using CSS as mush as possible.
ADD: Filed a bug to Apple #16072132
Try this:
.wrapper {
-webkit-overflow-scrolling: touch;
}
To get iOS to ignore hover states, try this:
.wrapper
{cursor: pointer;}
You can use this on any element to get it to function as expected.
Suddenly, I've got a solution... Using JavaScript I can remove :hover selector but still keep functionality.
If I will trigger checkbox visibility not by CSS :hover but by class and set it via javascript, it will work.
http://jsfiddle.net/822eG/10/
My current working solution requires no any changes in a whole code base and works fine in our conditions
With MutationObserver, monitor node insertion into head
If new node is inserted, and this is a link, check document.styleSheets
For each sheet check it's rules
If rule selector (access by document.styleSheets[n].rules[i].selectorText) contains :hover check styles for this selector
If styles contains display different from none or visibility different from visible - this is a "show by hover" style
For each such style change it's selector - replace :hover by .hover and declare a body delegate for mouseenter and mouseleave events which will toggle .hover class on triggered element
Full source code here: https://gist.github.com/Olegas/9143277
..try using this:
$('.row').on('touchstart click', function(){
alert('clicked');
});