Differences

This shows you the differences between two versions of the page.

--- newdevs:code:grid-cell-text-generator [2023/03/30 16:59] – created tmccanna
+++ newdevs:code:grid-cell-text-generator [2023/12/21 16:55] (current) – tmccanna
@@ Line 4: / Line 4: @@
 When a grid cell (aka, column) is modified to include HTML such as a link, it will not print when printing the full grid unless you take the additional step of telling the system what to print.
-===== Example of the Barcode Field in Holds Pull List  =====
+===== Example of the Title Field in Holds Pull List  =====
-. The barcode field in staff/share/holds/grid.component.html is modified ng-template so that it links to the item page:
+. An ng-template block in in staff/share/holds/grid.component.html is created to turn the title column into a link to the record page:
 <code>
-<ng-template #barcodeTmpl let-hold="row" let-col="col">
+<ng-template #titleTmpl let-hold="row">
-    <a href="/eg/staff/cat/item/{{hold.cp_id}}/summary">
+    <a class="no-href" routerLink="/staff/catalog/record/{{hold.record_id}}">
-        <ng-container *ngIf="col.name == 'current_item' && hold.current_copy">
+        {{hold.title}}
-            {{hold.cp_barcode}}
-        </ng-container>
-        <ng-container *ngIf="col.name == 'requested_item' && isCopyHold(hold)">
-            {{hold.cp_barcode}}
-        </ng-container>
     </a>
 </ng-template>
-</code>
-. Below that, the grid column is defined:
+<eg-grid-column i18n-label label="Title" [hidden]="true" name='title'
+    [cellTemplate]="titleTmpl">
-<code>
-<eg-grid-column i18n-label label="Current Item" name='current_item'
-    [cellTemplate]="barcodeTmpl">
 </eg-grid-column>
 </code>
-. The grid.component.ts file is modified to specify the alternate text that should print out:
+. The eg-grid tag should include
+<code>[cellTextGenerator]="cellTextGenerator"</code>
+. The grid.component.ts file must include the ability to use GridCellTextGenerator:
+<code>import {GridDataSource, GridColumn, GridRowFlairEntry, GridCellTextGenerator} from '@eg/share/grid/grid';</code>
+and then inside the class:
+<code>cellTextGenerator: GridCellTextGenerator;</code>
+. And then inside ngOnInit - the grid.component.ts file is modified to specify the alternate text that should print out:
 <code>
 this.cellTextGenerator = {
-    title: row => row.title,
+    title: row => row.title
-    cp_barcode: row => (row.cp_barcode == null) ? '' : row.cp_barcode,
-    current_item: row => (row.cp_barcode == null) ? '' : row.cp_barcode,
-    requested_item: row => (row.cp_barcode == null) ? '' : row.cp_barcode,
-    ucard_barcode: row => row.ucard_barcode
 };
 </code>