jsViews dynamic linking to a different item in array - templating

I am trying to have a dynamic if linking to a property of a different item in an array.
My current code:
Loader
for (...) {
var index = this.App.Data.Questions.push({
...
}) - 1;
if (CompareGuids(this.App.Data.Questions[index].QuestionId, '06EF685A-629C-42A5-9394-ACDEDF4798A5')) {
this.App.PregnancyQuestionId = index;
}
Template
{^{if ~root.Data.Questions[~root.PregnancyQuestionId].Response.ResponseText == "true"}}
{{include #data tmpl="Clinical-History-QuestionWrapper-SingleQuestion"/}}
{{/if}}
It works for the initial loading, but it does not update.
Note I assume I could achieve this with a boolean property in ~root, and then have a $.observable(...).oberserve(...) update this property, but I would prefer to have a direct access.

It looks like all you need to do is make sure that you are changing the PregnancyQuestionId observably. Just assigning a value cannot trigger data-linking to update the UI.
You need to write:
$.observable(this.App).setProperty("PregnancyQuestionId", index);
That should then trigger the binding correctly...

Related

BeanItemContainer unique property values

I am using BeanItemContainer for my Grid. I want to get a unique list of one of the properties. For instance, let's say my beans are as follows:
class Fun {
String game;
String rules;
String winner;
}
This would display as 3 columns in my Grid. I want to get a list of all the unique values for the game property. How would I do this? I have the same property id in multiple different bean classes, so it would be nice to get the values directly from the BeanItemContainer. I am trying to avoid building this unique list before loading the data into the Grid, since doing it that way would require me to handle it on a case by case basis.
My ultimate goal is to create a dropdown in a filter based on those unique values.
There isn't any helper for directly doing what you ask for. Instead, you'd have to do it "manually" by iterating through all items and collecting the property values to a Set which would then at the end contain all unique values.
Alternatively, if the data originates from a database, then you could maybe retrieve the unique values from there by using e.g. the DISTINCT keyword in SQL.
In case anyone is curious, this is how I applied Leif's suggestion. When they enter the dropdown, I cycle through all the item ids for the property id of the column I care about, and then fill values based on that property id. Since the same Grid can be loaded with new data, I also have to "clear" this list of item ids.
filterField.addFocusListener(focus->{
if(!(filterField.getItemIds() instanceof Collection) ||
filterField.getItemIds().isEmpty())
{
BeanItemContainer<T> container = getGridContainer();
if( container instanceof BeanItemContainer && getFilterPropertyId() instanceof Object )
{
List<T> itemIds = container.getItemIds();
Set<String> distinctValues = new HashSet<String>();
for(T itemId : itemIds)
{
Property<?> prop = container.getContainerProperty(itemId, getFilterPropertyId());
String value = null;
if( prop.getValue() instanceof String )
{
value = (String) prop.getValue();
}
if(value instanceof String && !value.trim().isEmpty())
distinctValues.add(value);
}
filterField.addItems(distinctValues);
}
}
});
Minor point: the filterField variable is using the ComboBoxMultiselect add-on for Vaadin 7. Hopefully, when I finally have time to convert to Vaadin 14+, I can do something similar there.

How do you add an initial selection for Angular Material Table SelectionModel?

The Angular Material documentation gives a nice example for how to add selection to a table (Table Selection docs). They even provide a Stackblitz to try it out.
I found in the code for the SelectionModel constructor that the first argument is whether there can be multiple selections made (true) or not (false). The second argument is an array of initially selected values.
In the demo, they don't have any initially selected values, so the second argument in their constructor (line 36) is an empty array ([]).
I want to change it so that there is an initially selected value, so I changed line 36 to:
selection = new SelectionModel<PeriodicElement>(true, [{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'}]);
This changes the checkbox in the header to an indeterminate state (as expected), but does not cause the row in the table to be selected. Am I setting the initial value incorrectly, or what am I missing here? How can I set an initially selected value?
Tricky one. You need to initialize the selection by extracting that particular PeriodicElement object from your dataSource input, and passing it to the constructor.
In this particular case, you could code
selection = new SelectionModel<PeriodicElement>(true, [this.dataSource.data[1]);
It's because of the way SelectionModel checks for active selections.
In your table markup you have
<mat-checkbox ... [checked]="selection.isSelected(row)"></mat-checkbox>
You expect this binding to mark the corresponding row as checked. But the method isSelected(row) won't recognize the object passed in here as being selected, because this is not the object your selection received in its constructor.
"row" points to an object from the actual MatTableDataSource input:
dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
But the selection initialization:
selection = new SelectionModel<PeriodicElement>(true, [{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'}]);
happens with a new object you create on the fly. Your selection remembers THIS object as a selected one.
When angular evaluates the bindings in the markup, SelectionModel internally checks for object identity. It's going to look for the object that "row" points to in the internal set of selected objects.
Compare to lines 99-101 and 16 from the SelectionModel source code:
isSelected(value: T): boolean {
return this._selection.has(value);
}
and
private _selection = new Set<T>();
I was facing the same issue, I used dataSource to set the initial value manually in ngOnInit()
ngOnInit() {
this.dataSource.data.forEach(row => {
if (row.symbol == "H") this.selection.select(row);
});
}
If you do the following, it works too
selection = new SelectionModel<PeriodicElement>(true, [ELEMENT_DATA[1]])
To select all you can do
selection = new SelectionModel<PeriodicElement>(true, [...ELEMENT_DATA])
I hope the answer is helpful
Or more dynamically if you have a set of values and you want to filter them before:
selection = new SelectionModel<PeriodicElement>(true, [
...this.dataSource.data.filter(row => row.weight >= 4.0026)
]);
This gets more tricky if you have data loading asynchronously from an api. Here is how I did it:
Firstly I have implemented the DataSource from "#angular/cdk/table". I also have an RxJS Subject that fires whenever data is loaded (first time or when user changes page in the pagination section)
export abstract class BaseTableDataSource<T> implements DataSource<T>{
private dataSubject = new BehaviorSubject<T[]>([]);
private loadingSubject = new BehaviorSubject<boolean>(false);
private totalRecordsSubject = new BehaviorSubject<number>(null);
public loading$ = this.loadingSubject.asObservable();
public dataLoaded$ = this.dataSubject.asObservable();
public totalRecords$ = this.totalRecordsSubject.asObservable().pipe(filter(v => v != null));
constructor(){}
connect(collectionViewer: CollectionViewer): Observable<T[]>{
return this.dataSubject.asObservable();
}
disconnect(collectionViewer: CollectionViewer): void {
this.dataSubject.complete();
this.loadingSubject.complete();
this.totalRecordsSubject.complete();
}
abstract fetchData(pageIndex, pageSize, ...params:any[]) : Observable<TableData<T>>;
abstract columnMetadata(): {[colName: string]: ColMetadataDescriptor };
loadData(pageIndex, pageSize, params?:any[]): void{
this.loadingSubject.next(true);
this.fetchData(pageIndex, pageSize, params).pipe(
finalize(() => this.loadingSubject.next(false))
)
.subscribe(data => {
this.totalRecordsSubject.next(data.totalNumberOfRecords);
this.dataSubject.next(data.records)
});
}
}
Now when I want to pre-select a row, I can write a function like this in my component which hosts a table that uses an implementation of the above mentioned data source
selectRow(rowSelectionFn: (key: string) => boolean){
this.dataSource.dataLoaded$.pipe(takeUntil(this.destroyed$))
.subscribe(data => {
const foundRecord = data.filter(rec => rowSelectionFn(rec));
if(foundRecord && foundRecord.length >= 0){
this.selection.toggle(foundRecord[0]);
}
});
}

How to display previous value on Min Miles text field

I want to display a previous value on Min Miles and that should not be editable. I want like
Default value of Min Miles is 0.
When I click on Add More Range then In the new form - Min Value should be Max Value of Previous Form.
I am using semantic form for. Please Help Me. How can I do this...
Regarding your second question, and assuming that the new form appears through javascript, without page reloading, you can grab the
field value with javascript and use it as the default value for the
new field. The "add new range"
Something Like
function getvalue(){
var inputTypes_max = [],inputTypes_min = [],inputTypes_amount = [];
$('input[id$="max_miles"]').each(function(){
inputTypes_max.push($(this).prop('value'));
});
$('input[id$="amount"]').each(function(){
inputTypes_amount.push($(this).prop('value'));
});
var max_value_of_last_partition = inputTypes_max[inputTypes_max.length - 2]
var amount_of_last_partition = inputTypes_amount[inputTypes_amount.length - 2]
if (max_value_of_last_partition == "" || amount_of_last_partition == "" ){
alert("Please Fill Above Details First");
}else{
$("#add_more_range_link").click();
$('input[id$="min_miles"]').each(function(){
inputTypes_min.push($(this).prop('id'));
});
var min_id_of_last_partition=inputTypes_min[inputTypes_min.length - 2]
$("#"+min_id_of_last_partition).attr("disabled", true);
$("#"+min_id_of_last_partition).val(parseInt(max_value_of_last_partition) + 1)
}
}
I have Used Jquery's End Selector In a loop to get all value of max and amount field as per your form and get the ids of your min_miles field and then setting that value of your min_miles as per max_miles
It worked For me hope It works For You.
Default value of a field can just be passed in the form builder as a second parameter:
...
f.input :min_miles, "My default value"
Of course I do not know your model structure but you get the idea.
Regarding your second question, and assuming that the new form appears through javascript, without page reloading, you can grab the field value with javascript and use it as the default value for the new field. The "add new range" click will be the triggerer for the value capture.
Something like (with jQuery):
var temp_value = '';
$('#add_more_range').click(function(){
temp_value = $('#my_form1 #min_miles').value();
$('#my_form2 #max_miles').value(temp_value);
});
Again I am just guessing the name of the selectors, but the overall approach should work.
If you are also adding dinamically to the page the "Add new range" buttons/links, then you should delegate the function in order to be inherited also for the so new added buttons:
$('body').on('click', '#add_more_range', function(){...});

Grails: ArrayList - Retrieval Speed

I'm working on speed issues with a currently working method that finds a specific attribute collection within an ArrayList. Depending on the size, it can take longer than 7 seconds to find the value in the list.
I need to speed up this process, so I can deal with larger volumes of data. Any assistance would be greatly appreciated. Here is my example;
Method:
public ArrayList getIntegrationTag(String attribute) {
return crmMapping?.findAll { it.get("ATTRIBUTE") == attribute }?.collect{
it.INTEGRATION_TAG
}?.unique()
}//end getIntegrationTag(String attribute)
crmMapping content
"[{ATTRIBUTE=AcademicIndex, INTEGRATION_TAG=Contact~nAcademic_Index},
{ATTRIBUTE=AcademicInterest,
INTEGRATION_TAG=Contact~msplAcademic_Interest},........]"
the findAll loops over each record, then the collect loops over each record, then unique loops over each record again.
Try...
Set result = [] as Set
for(element in crmMapping) {
if(element.get("ATTRIBUTE") == attribute) {
result << element.INTEGRATION_TAG
}
}
return (result as ArrayList)
This will only loop once it it will be unique as it was added to a Set
Do the following once
def crmMappingMap = crmMapping.groupBy({ it.ATTRIBUTE })
Then you have a map of all same attribute instances and can access it using crmMappingMap[attribute].INTEGRATION_TAG, which will return the desired array, like this:
public ArrayList getIntegrationTag(String attribute) {
crmMappingMap[attribute].INTEGRATION_TAG.unique()
}
Always keep a map, then speed of access will be fast enough.

Unable to cast object of type WhereListIterator<system.web.Mvc.ListItem> to type system.web.mvc.listitem

I have a SelectList that I first check for a selected value != null and then want to use this selectedvalue in a where clause for a filter. Like so:
if(searchBag.Qualities.SelectedValue != null){
ListItem selected = (ListItem)searchBag.Qualities.SelectedValue;
}
I made the cast in a seperate useless line to pinpoint the problem.
This gives me a
Unable to cast object of type 'WhereListIterator`1[System.Web.Mvc.ListItem]' to type 'System.Web.Mvc.ListItem'.
Weuh?
--EDIT--
It was indeed because multiple selections were made.
This was because on creation I set the selected value to theItems.Where(i=>i.someCriterea) and I forgot to put .FirstOrDefault() at the end. Ending up in the possibility of multiple answers.
Since it was an IEnumerable, it was a lazy list and hence the WhereListIterator I guess.
I solved it by simple putting FirstOrDefault at the end.
Its already been explained, but here's another suggestion as to how to get what you're looking for:
if(searchBag.Qualities.SelectedValue != null){
ListItem selected = (ListItem)searchBag.Qualities.SelectedValue.FirstOrDefault();
}
I assume the SelectList lets you select more than 1 item?
So SelectedValue is probably a list? Not 1 listitem.
Cast it to:
WhereListIterator<ListItem> selected = (WhereListIterator<ListItem>)searchBag.Qualities.SelectedValue;
instead
and see what properties you have there.
SelectedValue is not a ListItem, it's the value of the selected list item. So given this:
var selectList = new SelectList(companiesList, "Id", "Name", companiesList[3]);
selectList.SelectedValue will equal companiesList[3].Id. If you want the actual list item you can do something like this:
ListItem selected = selectList.GetListItems().Where(x => x.Value == selectList.SelectedValue.ToString())
Just curious, why do you want the selected list item?

Resources