I want to build a test about component in angular 5 about dropdown.
When I choose a different value in list dropdown (dropdown1), the list in other dropdown (dropdown2) changes.
For exemple:
I have two Object:
Country = [{id:1, name:'USA'}, {id:2, name:'France'}];
City = [{id:1, name:'Chicago', countryId:1}, {id:2, name:'New York', countryId:1}, {id:3, name:'Texas', countryId:1}, {id:4, name:'Paris', countryId:2}, {id:5, name:'Toulouse', countryId:2}];
In view, when I select USA country in dropdown, an other dropdown display a list of City of USA. Same for France.
Please help me, thank you very much
Please check this sample project. This will help you,
https://stackblitz.com/edit/angular-heokyk
The logic is, create a dropdown with list of countries and upon selecting, we need to find the cities by country id. Once you get that list, render the second dropdown with that list.
To get the callback back on select the countries, you can use (change) event in the dropdown
Related
I have page for country selection as list box of SelectOneMenu of primefaces component. This page has other list items of same time.
Used the dropdown with JDropdown
#JDropdown(root = ".ui-selectonemenu", expand = ".ui-selectonemenu-trigger", list = "option",
value = ".ui-selectonemenu-label")
Dropdown country;
//
county.select("Canada");
when executed it finds more than one and unable to select
Question - I don't see and id for the JDropdown annotation, so how do we get this working?
Appreciated your help.
I'm not sure where Display Template option is supposed to show up on M2M relationships.
Here on movies collection setting up genres:
and the options
Docs seems confusing about the distinction between Visible Columns and Display Template:
Visible Columns sets the columns the interface shows (we're using name)
Display Template sets the columns the interface shows (we're using {{movie.name}})
Visible Columns does the above; in this example shows the title column in edit page for genres:
Alright, great!
But what about the template? maybe in the collection list?
no, just the count:
I've tried all these templates but nothing shows up anywhere:
{{title}}
{{movie.title}}
{{genre.title}}
{{genres.genre.title}}
What is the correct template here? Where is Display Template supposed to show up?
My collections setup:
movies
title text,
genres M2M (alias)
genres
title text
movies_genres
id pk,
genre numeric,
movie numeric
Thanks
This applies to O2M Interfaces:
Since there can be more than one related item linked, in the items list, the display template is rendered as a number of items until you interact with the item...
If you place your mouse over the Genres Fields, you should see the display template rendered.
A popover should show up and display the list of items as you defined.
Summary
Obtaining the record ID of the selected item in a drop-down list or radio-button UI appears to be a common question, but I have not found the answer for Google AppMaker despite months of searching.
The example use case: is I wish to edit a product that belongs to a family:
Product - (N:1) --> Family
Product - (M:N) --> FeatureValues
Example
The product belongs to the family Credit Card.
The credit-card family has the following features: |Contactles
|Near field
|Rates
|Chip & Pin|
In the edit form if I change the family the product belongs to then the list of features will change and new values for the features will need to be entered. (Dynamic form)
Hierarchy table
The family, features and permitted values are held in a single hierarchy table:
Family
|
Features
|
Values
newValue._key appears to only work for text-box UI items.
Dropdown list:
widget.datasource.item.Id or _key
provides the Product ID of the parent data source, ProductById (because I am editing a single product)
widget.datasource.selectKey(newValue._key); returns undefined
Sample code
Drop-down-list
OnValueChange event:
//update the features drop-down based on the taxonomy family selected
app.datasources.TaxonomyChildren.query.parameters.parent_fk = app.datasources.TaxonomyFamilies.item.Id;
app.datasources.TaxonomyChildren.load();
If I can pick up the record ID for the selected family in the dropdown list I can set a query.filter.parameter to show the features and values for the newly selected family.
Note: if it is a case you cannot create 'dynamic' forms in Google app-maker, then I'll stop as this has exhausted a lot of time.
Markus wrote:
So leave the options and value settings but in the onValueEdit run your query against TaxonomyChildren by passing in newValue.id to the query
Great Markus, that worked. On the drop-down ValueEdit event I call the function loadTaxonomyChildById(newValue.Id); passing it the Id of the selected TaxonomyFamily, changing the features displayed.
Summary
I am fairly new to AppMaker and this question centres on hierarchies. I have a Taxonomy table with a straight forward parent has children hierarchical relationship.
TaxonomyGroup -> has many Features -> has many Values
I've been working on a way to traverse this hierarchy using tile/grid widget.
When I reach the last node of the tree-structure I display this as a set of radio-buttons, representing the permitted options.
Example
Starting group is: Car
a Car has the following features:
-Colour
-Red
-Blue
-Silver
-Green
-Transmission
-Automatic
-Manual
-Fuel
-Petrol
-Hybrid
-Electric
If the parent group was Motorcycle, I would have a different set of features and options (permitted values).
A user selects the following for a Car:
+Colour
-Silver
+Trans
-Automatic
+Fuel
-Electric
Issue
While I can capture Silver, Automatic, Electric as the options selected, I cannot pick up the ID or any other fields of the record represented by the radio button selected.
Grid widget set-up
Taxonomy Grid Panel..... parent layer DS = Taxonomy (table) Id In [list]
Taxonomy Grid Child panel 'child' layer DS = TaxonomyChildren, ParentId = :parent
Radio button list DS = TaxonomyChildren: SubGroups (relation)
NB the radio button list sits within the Taxonomy Grid Child panel, so the list of options changes, based on the feature.
Radio button code onValueEdit event
// provides the row index of the selected Feature. e.g 'Transmission'
var rowIndex = widget.root.descendants.TaxonomyChildGridPanel.selectedIndex;
if (rowIndex === 0 ){
widget.root.descendants.Feature1.ID = widget.datasource.item.Id;
} else if rowIndex ===1 {
widget.root.descendants.Feature2.ID = widget.datasource.item.Id;
}
: //etc etc
}
Radio button widget issue
widget.datasource.item.Id
returns only the ID for the 1st item in the radio button list.
E.g. record ID 117 representing the option 'Petrol' not Electric as the radio button option selected.
I need to be able to capture the record behind the radio button selection, representing the node (called values) of the tree structure. In particular the ID of the record. Then store it against the creation of a new record, in this example a new Car record.
At present: onValueEdit event: the wrong record_ID is provided and it is always the 1st option in the radio-button list, irrespective of which option was chosen.
Screen shots
Grid panels for hierarchy levels 1 & 2, Radio buttons represent values
Hierarchy view with data
For this question resolution, see the answer given to the following question:
[How to obtain the record ID of the selected item in a dropdown list in google app-maker
Namely: onValueEdit event for the radio button selection the record id can be obtained using newValue. For Tick Boxes, it is newValues which builds an array of answers based on the items ticked.
if (!newValue) {
return;
} else {
answersDS.query.parameters.answerListIDs.push(newValue);
answersDS.load();
}
I need to build a sample MVC UI app using Kendo UI.
I have 2 multiselect widgets for airline names and airport names respectively and below I have a grid with airline airport data.
Now when I select airlines or airports in the multiselect, upon clicking a Fetch button, the grid should refresh.
I created a ViewModel named AirlineAirportViewModel for containing List<Airlines>, List<Airports> and List<AirlineAirports>.
I instantiate the List<AirlineAirports> in the Get action method of the controller and fill the other two lists getting distinct airline and airport values from the List<AirlineAirports>.
While posting on filter button click, I am able to get action parameters as 2 List<string> types which contain only the selected multiselect items
Instead of that, I want this action parameter of type AirlineAirportViewModel so that in future, I will be able to add more filter widgets and the number of parameters stay one only.
Now, am I approaching this in the right way ? If I need the ViewModel as action parameter, where should I store the selected items from the multiselects ?