I want to basically know if I am having rows selected to activate an input, the thing is
"selectionChange" event is not capturing when the selection is being changed I have a small example.
https://codesandbox.io/s/ag-grid-react-redux-events-forked-459v6?file=/index.js
What id expect to happen is to get the alert to show when something is selected on this example.
Turns out in React this property is onSelectionChange, following react pattern
I have used bootstrap dropdown control (below Tag) in react js application.It works fine as per my requirement.I would like to know how to show multi column in dropdown.For example I need to display Customer Code and Customer Name in dropdown
<select class="form-control">
I don't know react, but you must define the row and cols inside your dropdown code and fire the stopPropagation() event on click or hover to prevent the dropdown closes itself after doing a click in the container.
I am using a Angular md-autocomplete which starts showing users the auto completion options in a drop-down after they first type in the text box. Is there anyway to have this dropdown shown when the user first clicks in the text box as well?
Here is the md-autocomplete html:
<md-autocomplete flex
role="combobox"
md-selected-item="text"
md-no-cache="true"
md-search-text="searchText"
md-search-text-change="searchTextChange(searchText)"
md-items="item in getMatches(searchText)"
md-item-text="item.autocompleteVal"
md-min-length="0"
md-selected-item-change="$parent.selectedItemChange(item)" on-enter ng-cloak>
<span id="autocompleteText" md-highlight-text="searchText" md-highlight-flags="^i">{{item.autocompleteVal}} </span>
</md-autocomplete>
I was having same issue but setting the value of md-min-length to zero starts working
md-min-length="0"
Update:
If it still does not work then make sure that the searchTerm is initially set to null
Controller
vm.searchTerm = null
Html:
md-search-text="vm.searchTerm"
As #Hodglem pointed out, the current Material docs use the valueChanges observable of the FormControl object to detect changes and filter the options to display on the autocomplete panel. They prime the initial value as "null" so that all the available options will display.
However, often your list of options comes from a service (as in my use case) and your list is empty when startsWith(null) runs, especially if this code is in the ngOnInit() method like it is in the Material docs. This method runs immediately, while the service takes time to fill the list.
Autocomplete is smart enough to not open the panel if there are no options, so the initial focus on the element will not open the panel since there are no options to display. Even after the list fills from the service, the filter only gets triggered with a change in value on the control, so until the user starts typing, autocomplete's list of options remains empty, and therefore the panel remains closed.
I have two solutions:
Move the observable set up out of the ngOnInit() method, and into the subscribe() method that follows the call to the service that retrieves the options. After setting the list, run the observable set up. Now the panel will open on focus since the panel has options to display. (Make sure that the initialization of the FormControl remains in the ngOnInit() method, or the binding in the template will throw an error.)
Scratch the observable approach, and bind the filter method to the control's native events, such as (focus) and (input). In the filter method, check if the passed-in value is null or empty, and if it is, return the entire list. This way, the filter gets triggered every time the user clicks on the control or changes its value, and as long as the user clicks on the control at least once after the service filled the list of options, the panel will display. Depending on your use case, I found that by the time the user moves the mouse and focuses on the control, the service already delivered the goods, and the panel opens.
Seems like demo from site works as you expected.
https://material.angularjs.org/latest/demo/autocomplete
For Angular 2 and Material 2, setting startWith() on the valueChanges() observable of the control to null will show all of the values. Omitting this will result in the user first needing to type a value in to see results.
All values displayed on focus:
this.filterFuelTypeObservers.push(newFormGroup.controls.fuelType.valueChanges
.startWith(null)
.map(value => value ? this.fuelTypeFilter(value) : this.fuelTypes));
No values displayed until entry:
this.filterFuelTypeObservers.push(newFormGroup.controls.fuelType.valueChanges
.map(value => value ? this.fuelTypeFilter(value) : this.fuelTypes));
I haven't, but I imagine you could play around with startWith() to set the on focus list to be filtered by something also.
Just add the following line
md-min-length="0"
This will trigger a md-items calls even when just clicked
I am using ng-options for dropdown using 'select' tag.
I have to select only one option from drop down at a time.
While selecting option from drop down I have to show tooltip when I am hovering mouse on particular option.
I am able to show all the values in dropdown but not able to show the tooltip.
Could anyone please tell me how to show tooltip for ng-options?
Thanks
You will have to create a custom select box for the same. No other element can be associated with the <option> tag (Generated by ng-options). And so you cannot introduce tooltip description.
You want me to help you with the code?
I've been playing a little with ng-grid, and tried to understand how to use the editCellTemplate option.
I tried to make a cell editable in the form of a select component, and it works pretty awesomely, but after I finish editing and focus out of the cell, it remains in the state of selection, instead of returning to its default state.
Here's a Plunker of what I tried to do (click on height cells to edit).
Does anyone have an idea how I can make the editable cell go back to its default mode?
a great solution
ng-grid: Editable cell templates remain in edit mode on loss of focus v2.0.7
[2]:https://groups.google.com/forum/#!topic/angular/5MZITMG_HLo
<select ng-class="'colt' + col.index" ng-input="COL_FIELD" ng-model="COL_FIELD" data-placeholder="-- Select One --">
<option>nl</option>
<option>fr</option>
<option>en</option>
</select>