I need to create dynamically my calendar class to represent sometimes the first fortnight of the month and other times the second. So once my class has this properties
Other this one
So I bind this class to the template like this
<mat-table [dataSource]="dataSource">
<ng-container matColumnDef="{{this.columnsToDisplay[2]}}">
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{this.columnsToDisplay[2]}}</th>
<td mat-cell *matCellDef="let element; let i=index">
<mat-form-field class="form-input">
<input type="number" matInput [(ngModel)]="quincenaUrl==1?element.dia1:element.dia16"
(keyup.enter)="editarCelda2($event, i, this.columnsToDisplay[2])" />
</mat-form-field>
</td>
</ng-container>
But this
[(ngModel)]="quincenaUrl==1?element.dia1:element.dia16"
Only works in case quincena==2
That is When I edit this cell the dataSource is updated with that value
But when I select the first fortnight
Tha value edited in the template is not updated in the dataSource binded
Any idea, please?
Thanks
Related
I have this column definition
<ng-container matColumnDef="filePath">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Fichero</th>
<td mat-cell *matCellDef="let element" [matTooltip]="pp" class="cursor-mano">
{{element.filePath}}
</td>
</ng-container>
But when I hover over the cells no tooltip is shown
Any idea, please?
Thanks
I have some code that disables the checkbox depending on the drop down selection. I now also want to force uncheck depending on selection from drop down.
html:
<ng-container matColumnDef="permissions">
<th mat-header-cell class="text-center" *matHeaderCellDef>Permissions</th>
<td mat-cell *matCellDef="let p" class="text-center">
<mat-select [formControl]="p.item.permissionsControl">
<mat-option [value]="permissionOptions.NoAccess">No Access</mat-option>
<mat-option [value]="permissionOptions.ReadOnly">Read Only</mat-option>
<mat-option [value]="permissionOptions.Modify">Modify</mat-option>
<mat-option [value]="permissionOptions.Confirm">Confirm</mat-option>
<mat-option [value]="permissionOptions.Full">Full</mat-option>
</mat-select>
</td>
</ng-container>
<ng-container matColumnDef="canConfirmOwnChanges">
<th mat-header-cell class="text-center" *matHeaderCellDef>Can Confirm Own Changes</th>
<td mat-cell *matCellDef="let p" class="text-center">
<span *ngIf="p.item.permissionsControl.value == permissionOptions.Confirm || p.item.permissionsControl.value == permissionOptions.Full">
<mat-checkbox [disabled]="false" [formControl]="p.item.canConfirmOwnChangesControl"></mat-checkbox>
</span>
<span *ngIf="p.item.permissionsControl.value == permissionOptions.NoAccess || p.item.permissionsControl.value == permissionOptions.ReadOnly || p.item.permissionsControl.value == permissionOptions.Modify">
<mat-checkbox [disabled]="true" [formControl]="p.item.canConfirmOwnChangesControl"></mat-checkbox>
</span>
</td>
</ng-container>
Adding [checked]="false" does not work here.
Any advice would be greatly appreciated!
I managed to achieve this by subscribing to valueChanges on the FormControl for the dropdown and then enable / disable and set the value on the checkbox FormControl
I'm using Angular Material Table to show some date on my page. What I want to do is to modify the received data, what I get from backend is 3 different letters, A: answered, Y: yes, N: no. I want to show these as different color icons in the table not just letters, like A is a green tick and N is red x mark. How can I format it to show the icons and not the letters?
here's my code:
<div class="mat-elevation-z8">
<mat-card>
<ng-container matColumnDef="answer">
<th mat-header-cell *matHeaderCellDef mat-sort-header>
<h3>Answered</h3>
</th>
<td mat-cell *matCellDef="let element"> {{element.answer}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<!-- (page)="onPaginate($event)" -->
<mat-paginator [length]="length" [pageSizeOptions]="[5, 10, 15, 20]" showFirstLastButtons [pageSize]="pageSize || defaultPageSize">
</mat-paginator>
</mat-card>
</div>
you can use *ngIf in your cell to display whatever HTML you want:
<td mat-cell *matCellDef="let element">
<img *ngIf="element.answer === 'A'" src="...">
<div *ngIf="element.answer === 'B'">the answer is B</div>
<mat-icon *ngIf="element.answer === 'C'">home</mat-icon>
</td>
I am trying to enable multi selection options with dynamic columns. Though dynamic columns are working multi selection is not working.
Regards
jcm
<mat-table [dataSource]="dataSource" matSort="matSort">
<ng-container [matColumnDef]="col.columnDef" *ngFor=" let col of displayColumns">
<th mat-header-cell *matHeaderCellDef mat-sort-header>
{{ col.header }}
<ng-container [matColumnDef]="select">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox #checkbox (change)="$event ? masterToggle() : null" [disabled]="isDisabled" [checked]="selectionTable.hasValue() && isAllSelected()"
[indeterminate]="selectionTable.hasValue() &&
!isAllSelected()"></mat-checkbox>
</th>
</ng-container>
</th>
<td mat-cell *matCellDef="let element ">{{ element[col.columnDef] }}</td>
<td mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selectionTable.toggle(row) : null" [checked]="selectionTable.isSelected(row)"></mat-checkbox>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnDefs"></tr>
<tr mat-row *matRowDef="let row; columns: columnDefs; "></tr>
</mat-table>
You have to add a header to displayColumns for the multi-select column, and when you running over them using *ngFor, you have to check using *ngIf whether you are in the first header (which belongs to the multi-select column) or in the other headers (which belongs to the dynamic columns), and create the header and column respectively.
You can see an example I made in stackblitz.
I need to be able to use the same drop down list multiple times on a page. The first time i use the 'list' on the select tag, it works fine. The same list does not populate the second select tag i use it on. Here are the details.
In the action class, i populate the ArrayList containing values i need to populate the select tag.
setNames(new SomeDAO().getNames());
In the JSP
<s:select list="names"
id="nameList"
listKey="nameId"
listValue="userName"
/>
This select list populates just fine. If I use the following select tag on the same page (using the same list), it fails to print.
<s:select list="names"
id="rName"
listKey="nameId"
listValue="userName" />
If i replace the 'list' above with #{'test':'test'} (hardcoded list), the tag shows up fine. Looks like the property i set in the Action is getting cleared after the first use. Is that whats happening or am i doing something wrong? I get an 'IllegalStateException: Response already committed' error
Edit 1:
setNames() is used in the action method that deals with the JSP page. It is a simple getter function.
In the JSP, here is what i have.
<tr>
<td align="left" class="td-plain">Add New:</td>
<td class="td-plain">
<s:select list="names"
id="addNameID"
name="addUserNameID"
listKey="reinsId"
listValue="reinsName"
headerKey=""
headerValue="--User Name--"
/>
</td>
<td class="td-plain"><input id="addTreatyNumber" type="text" /></td>
<td class="td-plain"><input id="addReinsPercentage" type="text" /></td>
<td class="td-plain"><input id="addFlatDollarRetentionAmt" type="text" /></td>
<td class="td-plain">
<%if(finance){ %>
<input type="button" class="greyButton" value="Add" onclick="addReinsInfo()"/>
<%}else{ %>
None
<%} %>
</td>
</tr>
and then later down on that page, i have
<tr id='<s:property value="caseGroupId"/>:<s:property value="treatyId"/>'>
<td class="td-plain"><input type='checkbox' id='<s:property value="caseGroupId"/>:<s:property value="treatyId"/>'/></td>
<td class="td-plain">
<s:select list="names"
id="rName"
name="dName"
listKey="reinsId"
listValue="reinsName"
headerKey=""
headerValue="--User Name--"
/>
</td>
<td class="td-plain_"><s:textfield id="tNumber" value="%{treatyNumber}"/></td>
<td class="td-plain_"><s:textfield id="tPercentage" value="%{reinspercentage}"/></td>
<td class="td-plain_"><s:textfield id="rAmount" value="%{flatDollarRetentionAmt}"/></td>
<td class="td-plain"><input type="button" value="Delete" class="greyButton"/></td>
</tr>
If I change the 'list' in the second tag to
list="#{'Test':'Test'}"
the tag shows up fine. Please let me know if i can provide any further info.
Edit 2: I was able to get this to work by setting the drop down list values to the session.
As asked by #Dave and #Quaternion, post the relevant Java/JSP code.
But until then... I've noted that you are not using name attribute in Struts Selects;
while you can refer multiple times from different tags to the same source (the list attribute), to populate the Select from the same list of objects, you should instead specify a different name for each one, to define which variable (sent back to the Action) contains the selected value of which Select;
this may not be the answer to the current question but it will show up to you soon.