I want to automate DropDownList when DropDownList id and item index are provided.
I can get DropDownList object on that object I can set selectedIndex as
dropDownObject.selectedIndex=index;
this can change DropDownList selected item to specified index item but when I dispatch "change" event on IndexChangeEvent object it is giving typeCoersion error.
can not convert spark.events::IndexChangeEvent#138445 to spark.events.IndexChangeEvent
Based on your question, I am assuming you want to catch the change in the selection of the drop down list.
Do not dispatch the change event, instead, you should listen for the valueCommit event and not the change event in this case. The valueCommit event is designed to fire when the selected index is changed both programmatically or by user interaction.
Taken right from the docs:
valueCommit
Dispatched when values are changed programmatically or by user
interaction.
So, do something like this:
<s:DropDownList valueCommit="changeHandler(event)" dataProvider="{yourData}" id="dropDown"/>
Hope this helps.
I solved this problem by setting
dropDownListObject.selectedIndex = providedIndex
after calling
dropDownListObject.closeDropDown(true)
so far I did this and solved problem
dropDownListObject.openDropDown();
dropDownListObject.selectedIndex = providedIndex;
dropDownListObject.closeDropDown(true);
dropDownListObject.selectedIndex = providedIndex;
I was missing last line, which was resulting to set selectedIndex to default one.
Related
I have mat-radio-group that has more mat-radio-group within it. I have created a stackblitz here
https://stackblitz.com/edit/angular-mdgy7x?file=app/radio-overview-example.ts
In the example when the page loads, I want to show 'ledger' radio option selected along with value1 below it selected as default. If I update the radio button to 'available', I need to select the 'value 1' below 'available' radio.
The code works fine for all cases, except the first case wherein I have to show default selection.
Can some one point out where I am going wrong?
For some reason, nested radio groups / buttons need a second update cycle in order to correctly update the default state. One way to achieve this, is to add a 0ms timeout in one of the lifecycle hooks before calling onRadioFilterChanged() with the default value. The earliest hook I found this to work in is ngOnInit(). You'll also need to set all checked properties to false so that a state change can actually happen, triggering the update.
So, adding
ngOnInit() {
setTimeout(_=> this.onRadioFilterChanged('L'), 0);
}
and setting checked: false also on the first checkboxes in each group will do the trick, as demonstrated in this updated stackblitz:
https://stackblitz.com/edit/angular-mdgy7x-dcijkt?file=app%2Fradio-overview-example.ts
Despite the 0ms timeout, you'll notice a slight delay on page load, but other than that and the kind-of-hack-ish feel to it, it works - and I haven't been able to get it to work in any other way so far.
First, add the call to ngOnInit:
ngOnInit(){
this.onRadioFilterChanged("L");
}
and create a variable to keep the value of ledger and available like for radios.
Then use that value in onRadioFilterChanged.
Another thing that is not working is when you select one of the sub-radiobuttons.
I achieved what I want using the following code. What I basically did is created separate radio buttons for parent and child and each of them has an ngModel associated with it. I then manipulate ngModel based on user interaction.
Following is the stackblitz,
https://stackblitz.com/edit/angular-mdgy7x?file=app/radio-overview-example.ts
What i need to do is let the user restore the default itemRenderer after they put in a custom one.
It works for List, but not when i try to do it for combobox and dropdownList. When i try open the combobox with a resetted defaultItemRenderer then the items are not shown (but i can still select items with the arrow keys).
This is how i do it:
defaultItemRenderer = component.itemRenderer;
component.itemRenderer = new ClassFactory(MyListItemRenderer);
...some time later when the user says it...
component.itemRenderer = defaultItemRenderer;
component.validateNow();
As i said, for List it works like a charm, but not for combobox.
P.S. im refering to spark components
Currently I am using UiService to create a form and I uses ListBox, from what I understand to pass a value via handler will be something like e.parameter.[Name of ListBox] to access the selected item.
Does anyone know is it possible to use like app.getElementById([Name of ListBox]) to access the selected item. The reason I am using this method is because my list of ListBox-es are dynamic.
I spent some time looking for this answer as well, but finally I tried one idea and it worked.
You can use e.parameter as an array so you can these two will give the same:
e.parameter.LIST_BOX_NAME
and
e.parameter['LIST_BOX_NAME']
So in the second sample any dynamic list box ID can be used. I use same handler for all added dropdown list and have this code to check what dropdown was changed and what value it has now:
if (e.parameter[e.parameter.source] == 'a'){
To change the content of the listBox you can use app.getElementById('ID of the listBox'), from there you can clear() and addItems again but you cannot read the listItems.
When I need to do this I usually store the list of items somewhere else, in a place that I can read anytime, for example the list of items can be stored as a string in the listBox tag itself so I have all items at hand to repopulate the listBox after I have clear it.
I have a spark datagrid with selectionMode="multipleRows".
I have three columns in the datagrid.
I don't want the row selection to happen when the user's click falls on the third column of a row.
The row selection should happen only when one of the first two columns is clicked.
How do I achieve this? There is a selectionChanging event for the datagrid, but the GridSelectionEvent object received in the handler does not seem to provide any information about the column on which the click happened.
Thanks!
I figured this out myself. I am not sure if this is a bug in the spark DataGrid. The following is definitely a hack and not clean.
In the grid_mouseDownHandler function in the DataGrid.as file, there is a line:
const columnIndex:int = isCellSelection ? event.columnIndex : -1;
This line is causing the columnIndex to be set as -1 if the selectionMode of the DataGrid is anything other than GridSelectionMode.SINGLE_CELL or GridSelectionMode.MULTIPLE_CELLS. As I mentioned in the original question, I need my datagrid to have a selectionMode of GridSelectionMode.MULTIPLE_ROWS.
I sub-classed the DataGrid and re-implemented the grid_mouseDownHandler (basically copy-pasted the whole function). I changed only the above line to always assign the columnIndex to event.columnIndex.
(I also had to copy some more functions which were referenced by the grid_mouseDownHandler over to my sub-class because those functions were protected or mx_internal. (toggleSelection, extendSelection, isAnchorSet)
Then, in the selectionChanging event handler, I could just do the following:
if( 2 == event.selectionChange.columnIndex )
{
event.preventDefault();
}
I realize that this is not a clean solution, but it is the best I could think of. Maybe someone can suggest a better solution?
I have a standard html drop down box.
I want to run js code after the user selected an item without a separate submit button.
Onchange event does not fire when the user selects the 1st item (actually the previously selected item) in the select box.
How can I make the combo box react to the click even if the previously selected item is clicked?
Notes:
1. I don't want to add 'select from here' or something similar to the select box.
2. the onclick event does not help since it fires also on the 1st click the user does to open the options before actually selecting one.
I don't think this can't be done. onchange, as you correctly point out, doesn't work. onmouseup fires too early.
I think onblur would do the trick but it will also fire when the user tabs through the available elements.
If you really need this to work reliably, consider using a JavaScript based replacement widget like this one. They enable you to work around the notorious lack of flexibility that standard form elements unfortunately have.
Oh and by the way, the <select> element is not a combo box, it's a drop-down.
:)
You can use the onclick event but at the same time count the number of clicks.
<script type="text/javascript">
var count = 0;
function selectClicked(sel){
count++;
if (count == 2){
//the user has selected something
//so go ahead and handle it
count = 0;
}
}
</script>
What if you added the "onclick" event to the individual "option" elements rather than the "select" element?