I trying to use mat-table-exporter to export mat-table.
Does anyone have any workaround to get a a mat-checkbox representation of a boolean value to the CSV file?
Maybe Talhature got any input???
Stackblitz link to a sample,
https://stackblitz.com/edit/mte-demo-2toxqz?file=src%2Fapp%2Fapp.component.html
Sorry for the late response. Saw your question, was disappointed to find no answers. I had a similar situation with icons. Took a page from the Angular Material page on accessibility and tossed in a sibling span with class "cdk-visually-hidden" that made the intended content work on export as well as be available for a screen reader.
Forked stackblitz: https://stackblitz.com/edit/mte-demo-kefmjm?file=src%2Fapp%2Fapp.component.html
Adding this before my checkbox worked.
<ng-container matColumnDef="hot">
<mat-header-cell *matHeaderCellDef mat-sort-header> Hot </mat-header-cell>
<mat-cell *matCellDef="let row">
<!-- added this line in -->
<span class="cdk-visually-hidden">{{row.hot}}</span>
<mat-checkbox (click)="$event.stopPropagation()" disabled="true [checked]="row.hot">
</mat-checkbox>
</mat-cell>
</ng-container>
Related
I am coming across an issue with getting older, previously working Orbeon forms to display in my Liferay portlet after upgrading to a new Orbeon Forms version.
My current environment:
Liferay Community Edition Portal 7.2.1 CE GA2, running on Tomcat-9.0.17
Upgraded Orbeon Forms 2016.2.1.201609272302 PE -> 2019.2.2.202003311635 PE, Orbeon Api and Orbeon Form Builder running on Tomcat-8.5.20, java version "1.8.0_192"
I started out by using an existing applicationName/formName, and after encountering too many errors related to data-migration (which I did expect) decided to start simple by duplicating an existing form, backing the old form up, and proceeding to use the existing form as a testing form with a limited amount of fields (one section with one input field).
Snapshot of Form in formbuilder
The portlet in the app shows the title of the form, but all content divs/spans have the “xforms-disabled” css class attached, and are hidden.
Form as viewed deployed in Liferay portlet
Orbeon starts up without issues. Nothing of note in the orbeon api logs.
The logger levels are all set to Debug. The orbeon.log file has no instances of xforms-disabled and hundreds of instances of xforms-enabled.
Link to DEBUG orbeon.log (large)
The endpoint that would bring back all the data for the form that would be embedded into the portlet looks like it has valid data:
/orbeon-api/fr/NRPP_Roads_FSR_Modification/roads_notification_of_fsr_modification/edit/?orbeon-embeddable=true
And then the end result on the page is as shown:
<div id="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡xf-571" class="xforms-group">
<h2 class="fr-section-title"><span id="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡xf-576" class="fr-section-label xforms-control xforms-output xforms-output-appearance-minimal"><span class="xforms-help"></span><span id="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡xf-576≡≡c" class="xforms-output-output">Notification of FSR Mod Works</span><span class="xforms-hint"></span></span></h2>
<div id="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡switch" class="xforms-update-full xforms-switch">
<span class="xforms-case-selected">
<div id="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡xf-579" class="fr-section-content xxforms-animate xforms-group">
<div id="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡rrs_.fsr_.section_-grid" class="xbl-component xbl-fr-grid">
<table id="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡rrs_.fsr_.section_-grid≡xf-589" class="fr-grid fr-grid-2 fr-grid-rrs_.fsr_.section_ fr-norepeat xforms-group" role="presentation">
<tbody class="fr-grid-body">
<tr class="fr-grid-tr">
<td id="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡rrs_.fsr_.section_-grid≡xf-592" class="fr-grid-td xforms-group"><span id="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡rrs_.fsr_.section_-grid≡rrs_.fsr_.section_.text-control" class="fr-grid-1-1 xforms-control xforms-input xforms-disabled"><label class="xforms-mediatype-text-html xforms-disabled xforms-label" for="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡rrs_.fsr_.section_-grid≡rrs_.fsr_.section_.text-control≡xforms-input-1"></label><input id="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡rrs_.fsr_.section_-grid≡rrs_.fsr_.section_.text-control≡xforms-input-1" type="text" name="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡rrs_.fsr_.section_-grid≡rrs_.fsr_.section_.text-control≡xforms-input-1" value="" class="xforms-input-input"><span class="xforms-disabled xforms-alert"></span><span class="xforms-disabled xforms-hint"></span></span></td>
<td id="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡rrs_.fsr_.section_-grid≡xf-597" class="fr-grid-td xforms-group"></td>
</tr>
</tbody>
</table>
<div class="" id="_orbeonformsproxyportlet_WAR_nrssfsmartformsportletorbeonproxyportlet_rrs_.fsr_-section≡rrs_.fsr_.section_-grid≡xf-599"></div>
</div>
</div>
</span>
</div>
</div>
It doesn't seem to matter how many fields or types of fields or sections/grids I add to the test page, they all render with the xforms-disabled class attached.
Why is the xforms-disabled class attached to the fields and how do I fix the form to prevent that from happening? Thanks in advance for the help!
I am upgrading an application to Angular 10.
In one of my components I use a material table. In the Angular 9 application my html looks like this:
<table mat-table [dataSource]="tableData" matSort class="mat-elevation-z8">
it works fine there, but when I upgrade to Angular 10 (angular material and angular) I get an error saying:
core.js:4442 ERROR TypeError: Cannot read property 'elementRef' of
undefined
at MatTable._applyNativeTableSections (table.ts:1098)
at MatTable.ngOnInit (table.ts:471)
this error dissapears when I change my html to:
<mat-table [dataSource]="tableData" matSort class="mat-elevation-z8">
<ng-container matColumnDef="date">
<mat-header-cell *matHeaderCellDef mat-sort-header="date"> Date </mat-header-cell>
<mat-cell *matCellDef="let element">{{dateAndTime(element.date)}}</mat-cell>
</ng-container>
<ng-container matColumnDef="type">
<mat-header-cell *matHeaderCellDef mat-sort-header="type"> Type </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.type}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns" (click)="onRowClicked(row)" class="clickable-row">
</mat-row>
</mat-table>
the page renders ok, sorting works but when I navigate away from the page I get the error:
core.js:4442 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'viewContainer' of undefined
TypeError: Cannot read property 'viewContainer' of undefined
at MatTable.ngOnDestroy (table.ts:525)
Inspection of this error reveals that it throws in the ngOnDestroy function of the table.
// table.ts from angular material 10.2
ngOnDestroy() {
this._rowOutlet.viewContainer.clear();
this._noDataRowOutlet.viewContainer.clear(); // error occurs here!
this._headerRowOutlet.viewContainer.clear();
this._footerRowOutlet.viewContainer.clear();
this._cachedRenderRowsMap.clear();
this._onDestroy.next();
this._onDestroy.complete();
if (isDataSource(this.dataSource)) {
this.dataSource.disconnect(this);
}
}
Apparently I have no _noDataRowOutlet, does this mean I have to define a no-data-row? (and a footer and header because of the next lines of code)
Or can i keep my template clean and avoid this error in somehow?
Updating to Angular 11 did not help for us.
We got the same error, saying the _noDataRowOutlet was undefined. In our case, the problem arose because we overrode the CdkTable template and did not add the noDataRowOutlet directive.
Adding this solved our problem:
<ng-container noDataRowOutlet></ng-container>
Using Angular Material, I have a Material table with MatSort to allow sorting of some (but not all) columns and drag and drop on the column headers to allow changing column order.
The problem is: columns for which sorting is disabled, cannot be dragged
The problem can be reproduced in https://stackblitz.com/edit/angular-mat-table-columns-draggable?file=src%2Fapp%2Fapp.component.html by adding the following line to
[disabled]="i%2==0"
Now only the second and the fourth column can be dragged.
This is because the whole component (mat-header-cell) gets disabled, which disables the click event, which in turn makes the cdkDrag events not fire at all.
While it's a bit ugly solution, you can conditionally switch the template of the mat-header-cell to either have or not have the mat-sort-header directive. Then you don't have to fall back to the [disabled] input:
<ng-container *ngIf="column.canSort">
<mat-header-cell *matHeaderCellDef
cdkDropList
cdkDropListLockAxis="x"
cdkDropListOrientation="horizontal"
(cdkDropListDropped)="dropListDropped($event, i)"
cdkDrag
(cdkDragStarted)="dragStarted($event, i)"
[cdkDragData]="{name: column.field, columIndex: i}" mat-sort-header>
{{ column.field }}
</mat-header-cell>
</ng-container>
<ng-container *ngIf="!column.canSort">
<mat-header-cell *matHeaderCellDef
cdkDropList
cdkDropListLockAxis="x"
cdkDropListOrientation="horizontal"
(cdkDropListDropped)="dropListDropped($event, i)"
cdkDrag
(cdkDragStarted)="dragStarted($event, i)"
[cdkDragData]="{name: column.field, columIndex: i}">
{{ column.field }}
</mat-header-cell>
</ng-container>
In the above example I've added the canSort property on the column, but of course you can use the above predicate of yours ("i%2==0").
Hope this helps.
Using a Angular Material table. How would be possible to apply a different background color to the column that is being sorted?
If you only want the <th> to change color on sort, assign a template ref, and reach into the reference to check if sort is active and sort value is present.
<th mat-header-cell #header *matHeaderCellDef mat-sort-header
[style.background-color]="
(header['_sort'].active == 'id' && header['_sort'].direction) ?'red':''"> ID </th>
StackBlitz
https://stackblitz.com/edit/angular-5fzkja?embed=1&file=app/table-overview-example.html
I hate to say it but I know a partial solution for your problem, My solution works if and only if the sort is being done by the user i.e. it doesn't highlight the column in initial sorting on first render however I post it here it might give you a direction to what to look at.
In order to capture the sort event you should add an event listener (matSortChange)="onSortEvent($event)" to your DOM file as following:
<table (matSortChange)="onSortEvent($event)" mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
then in your .ts file you can capture the name of the clicked column using the following and store it in a local variable:
activeColumn: string;
onSortEvent(eventData){
this.activeColumn= eventData['active'];
}
This will populate the name of the active column in a local variable which can be in turn used to activate a specific class for your headers like following:
in your css file you can have something like:
.highlight {
background-color: lightgray;
}
and in your DOM file:
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef mat-sort-header [className]="activeColumn === 'position'?'highlight':'default'"> No. </th>
<td mat-cell *matCellDef="let element"> {{}} </td>
</ng-container>
I hope it solves a little bit of your issues.
I want to implement the Demo shown at http://tablesorter.com/docs/example-pager.html in a mobile application. I want each row in the Demo to be collapsible/expandable. What is the best way to achieve it? To my knowledge tables don't work well in mobile applications. Correct me if I am wrong. Thanks.
== EDIT ==
This is almost all I want
http://stokkers.mobi/jqm/tableview/demo.html
I'm not sure how this will do in a mobile application, but check out this demo. No need to download that mod as it was added to tablesorter 2.0.5.
The demo shows how to use an undocumented option named cssChildRow which contains the class name expand-child. This class name is added to a table row tr to attach it to the row before it (example code from that demo):
<tr>
<td rowspan="2" class="collapsible"></td>
<td rowspan="2" class="collapsible_alt">SO71774</td>
<td>Good Toys</td>
<td>PO348186287</td>
<td>Jul 20, 2007</td>
<td>$972.78</td>
</tr>
<tr class="expand-child">
<td colspan="4">
<div class="bold">Shipping Address</div>
<div>
99700 Bell Road<br /> Auburn, California 95603
</div>
</td>
</tr>
The code needed to make the rows collapsible in in this file: jquery.tablesorter.collapsible.js