I'm new to svelte and trying to figure out how to modify a project created using it. The current project has a number of sliders bound to different variables, I'm looking for a way to implement a dropdown that also alters some of those variables. I'm uncertain how to bind the var to a quantity within the data object. Let's say the variable I want to effect is R0, how do I change R0 to Repro when the dropdown is chosen ?
let variants = [
{ id: 1, text: 'Wuhan', repro: 2.5 },
{ id: 2, text: 'Alpha', repro: 2.5 },
{ id: 3, text: 'Delta', repro: 3 }
];
<select bind:value={selected}">
{#each variants as variant}
<option value={variant}>
{variant.text}
</option>
{/each}
</select>
With credit to #johannchopin, I guess
changing $: console.log(selected) in his REPL
to R0 = selected?.repro || null will do as desired (Amended REPL)
Related
I'm writing a TFS/VSTS extension widget which uses the VSTS Combo control (documented here) to display a hierarchical data source. For example: Tree of stored queries.
Populating the tree is quite straight forward, such as in the following simplified code. Note that each source item has a unique id property.
var source = [{ text: 'root',
id:1,
children: [ {text:'child 1', id:10},
{text:'child 2', id:20},
{text:'child 3', id:30}
]
}];
var treeOptions = {
type: TreeView.SearchComboTreeBehaviorName,
width: "350px",
sepChar: '>',
source: source,
change: function () {
console.log('selected: ' + this.getValue());
}
};
var combo = Controls.create(Combos.Combo, $(".combo-container"), treeOptions);
I have two questions regarding the combo:
1. When the combo selection changes, How do I get the selected item's id (not the text)?
2. Is there a way to allow only leaf selection?
You can't get the selected item's id directly, you can get the id per to the select text (JSON operation).
It isn't supported to just allow only leaf selection, you may do it with other 3rd control package.
This week, i ran into a problem where dropdown control of angular material was not populating the default value coming from the API. My datasource looked like this:
public selectDataSource = [{
id: 1,
name: 'Option 1'
}, {
id: 2,
name: 'Option 2'
}, {
id: 3,
name: 'Option 3'
}];
Value was coming from the API as:
{
'selectedOption': {
id: 2,
name: 'Option 2'
}
}
But somehow, when i assigned the value to reactive form control field, it didn't get auto populated, which ideally should be the expected behavior.
Reason, answer below.... Go on
After all the research, I came to conclusion that Angular will only make a value as default selected if it points to the same memory location as in the original dataSource array.
In the example above, selectDataSource is stored in different memory location whereas the value coming from the API is pointing to different memory location.
Solution: Loop through the original datasource and filter the matched entry with result from API, to get the selected object from the original dataSource and that's it you are done. Something like below:
selectedOption = selectedDataSource.filter((option) => option.id === selectedOption.id)[0];
Now, we have selectedOption pointing to the same memory location from the original dataSource array.
Below is the link to solution. Try toggeling the variable solveProblem to see the default behaviour(when pointing to different memory loctaion).
https://stackblitz.com/edit/angular-reactive-dropdown-control
In a Hope, it'll help someone someday.
Thanks,
Manish Kumar
I had the same problem with dropdowns not showing already saved / selected choices and this answer to another question finally helped.
The solution is using the [compareWith]="compareFunction" property on the select tag to override the default comparison happening. By referencing a custom compare function you can tailor how the matching of initial value to dropdown values should work.
My current solution:
<mat-form-field>
<mat-select formControlName="gender" [compareWith]="compareSelectValues">
<mat-option *ngFor="let gender of genderValues" value="{{gender.id}}">{{gender.label}}</mat-option>
</mat-select>
</mat-form-field>
And Typescript function:
private compareSelectValues(selectedValue, compareValue): boolean {
return Number(selectedValue) === compareValue;
}
Number() is needed as the value is converted to a string after setting it in HTML. Using material design components here but looking at the other post, this shouldn't change the general functionality. Hope this helps someone, who finds this question before the other one, like I did.
In a .net MVC app, trying to learn semantic UI. (2.2.13) I've been beating my head against the wall on this one.
I have a remote populated dropdown, that I'm trying to create a default value for at initial page load.
The API is working, returning expected data.
My problem is that when a user 'tabs' into the element, the forceSelection default of the apiSettings forces the selection of the first item in the dropdown, which in this case is not what my default value is. (In this case, say that CAT is the first option in the list)
The desired behavior is keeping 'DOG' as the selected value when tabbed through, and i would like to keep the functionality of 'forceSelection' to prevent a user from leaving the dropdown with something typed that isn't included in the dropdown options.
I'm THINKING that i need a way of passing the current (default) value, and making that the selected value when the dropdown is initialized?
Here's the .js, in a doc ready.
$('.quom').dropdown({
apiSettings: {
url: 'ActualUrlRemoved',
cache: false
},
fields: {
name: 'Animal_Name',
value: 'Animal_Name'
},
onShow: function (val) {
///set active based on val here??
// $(this).val('DOG');
}
});
And the HTML setting the default 'DOG' (and using the "" value as the label) :
<select id="animalTest" name="ANIMAL" class="ui fluid search selection dropdown quom">
<option value="">Animal*</option>
<option value="DOG" selected>DOG</option>
</select>
Figured it out. This works for me.
$('.quom').dropdown({
apiSettings: {
url: 'URLHERE',
cache: false
},
fields: {
name: 'Animal_Name',
value: 'Animal_Name'
},
onShow: function () {
current = $(this).val();
$(this).dropdown('set selected', current);
}
});
I'm using rails with react-js so here i'm trying to generate select tag like this:
import { form, input, button, span, div,select } from 'r-dom';
const keywordInput = select({
name: 'category',
className: css.keywordInput,
options: {[
{value: 'one', label: 'One'},
{value: 'two', label: 'Two'}
]}
});
However this doesn't generate options inside select tag also.
Any help will be appreciated.
So this is a bit late but since I just spent 1 hour struggling on that too and the r-dom documentation (see here) is more than succinct, here it is :
In a generic manner, r-dom will generate html tags based on what you coded. Each html tag needs to be a r-dom object. In HTML, a <select> tag contains <option> tags. Example :
<select>
<option value="km">KM</option>
<option value="miles">Miles</option>
</select>
This means in r-dom, you need to create your select({}) object, but also your option({}) objects, one for each option, and then pass them as children of your select object. The r-dom documentation (see link above) hints to the following synthax :
myComponent = component([properties], [children])
For an explicit example of building a <select> tag, here are two similar ways to build the list from the above example (note that since option is a r-dom object, you also need to import it) :
import {select, option} from 'r-dom'
const unitOptionKm = option({
value: "km",
label: "KM"
});
const unitOptionMiles = option({
value: "miles",
label: "Miles"
});
const selectUnitList = select({
defaultValue: "km"
},[
unitOptionKm,
unitOptionMiles
]);
You can have a shorter code with the same result like this :
import {select, option} from 'r-dom'
const selectUnitList = select({
defaultValue: "km"
},[
option({value: "km",label: "KM"}),
option({value: "miles",label: "Miles"})
]);
To conclude, when using r-dom, we have to see how it is used in html, and each tag must be declared as a r-dom object and passed as a child of its parent tag.
I have a trouble about hiding columns in a Grid at runtime.
In a project I use a function that returns the configuration of a column in a Grid.
For take the list of my columns in the Grid I use this piece of code:
var cmV = cmpGrid.getView();
var cmH = cmV.getHeaderCt();
var cm = cmH.getGridColumns();
The variable "cm" returns an array with the configured columns in the grid.
When I manually hide a column with the "column" option in the header Grid with ExtJS version 3.4.1 I can get the property
hidden:true
for the configured column.
But with ExtJS 6 the configured column doesn't include this property.
How I can resolve this issue?
Thanks at all in advance,
Lorenzo.
**
UPDATE
**
I have discovered this about my previous question.
With
var cm = cmH.getGridColumns();
I can get the array of the columns in the grid.
Analyzing this array with Firebug I had found the subarray "config" that contains the properties required by the columns for the configuration.
However now this array doesn't reflect more the changed configuration of a column but the default configuration applied.
My first question is if this new behavior is a bug or not.
Because I have found this new behavior I have changed my code to get the properties of a column not from the subarray config but from the radix. However now the possible configurations are so much.
Now my second question is if there is a way to reduce or to have only the principal properties for type of columns in a grid.
Why not just use grid.columns[index].setHidden(true) ?
Or if you want to take the list of columns, how about reconfigure columns.
var tempColumns = [];
// "cm" returns an array with the configured columns in the grid
cm.forEach(function(e) {
if (some conditions) {
tempColumns.push({
xtype: e.xtype,
text: e.text,
dataIndex: e.dataIndex,
hidden: true,
width: e.width,
align: e.align,
format: e.format
});
}
else{
tempColumns.push({
xtype: e.xtype,
text: e.text,
dataIndex: e.dataIndex,
hidden: e.hidden,
width: e.width,
align: e.align,
format: e.format
});
}
});
grid.reconfigre(null, tempColumns);
https://fiddle.sencha.com/#fiddle/17lq