Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
30
Multiple hyperlinks in the igxgrid
posted

Hello,

I realize the below is a lengthy post - am open to a phone call or online chat to explain - 

https://ko.infragistics.com/community/forums/f/ignite-ui-for-angular/118703/angular-routing-is-not-working-inside-the-iggrid-column-template

The inablility to use a routerLink in the column template due to the reasons mentioned above is a blocker for our use case.

  1. We need to two links in the grid to navigate to different views
    1. One caveat here is that in the child we display entity specific meta data that does not exist in the API calls for the child view.
    2. Also (since hyperlinks) the onCellClick is not an option here due to inconsistent user experience – since if the user clicks on the white space in a call that has an anchor tag the  (onCellClick)="onCellClick($event)" is not fired
  2. The columns are set up as –
  1. <!-- name column -->
  2. <igx-column field="analyzer_tag" header="Name" width="120" [dataType]="'string'" [disableHiding]="false" [disablePinning]="false" [filterable]="true" [movable]="false" [resizable]="true" [sortable]="true">
  3. <ng-template igxCell let-value>
  4. <a class="cell__inner" (click)="angularComponentRef.componentFn(value, 'name')">
  5. <igx-icon fontSet="material">insert_chart</igx-icon>
  6. {{ value }}
  7. </a>
  8. </ng-template>
  9. </igx-column>
  10. <!-- recency column -->
  11. <igx-column field="days_old" header="Days Since Last Note" width="120" [dataType]="'string'" [disableHiding]="false" [disablePinning]="false" [filterable]="true" [movable]="false" [resizable]="true" [sortable]="true">
  12. <ng-template igxCell let-value>
  13. <a class="cell__inner" (click)="canNavigate(value) && angularComponentRef.componentFn(value, 'notes')">
  14. {{ getRecency(value) }}
  15. </a>
  16. </ng-template>
  17. </igx-column>

  1. As a work around – to get the primary entity with the second column I have to concatenate it –
  1. this.siteResults.site_info.analyzers.map(
  2. sr => {
  3. sr.days_old = `${sr.days_old}~${sr.analyzer_tag}`
  4. }
  5. );

 

Then in the template I have to remove the appended primary key by calling the GetRecency method –

  getRecency(delimitedValue: string) {

    // TODO: convert to pipe

    if (delimitedValue.indexOf('~') > -1) {

      const recency = delimitedValue.split('~')[0];

      return recency === 'No Notes' ? '' : recency;

    } else {

      return delimitedValue;

    }

  }

Then in the navigate method suggested in your link –

  navigate(analyzerTag: string, origin: string) {

    if (analyzerTag.indexOf('~') > -1) {

      analyzerTag = analyzerTag.split('~')[1];

    }

    if (origin === 'notes') {

      sessionStorage.setItem(this.DIAGNOSTICS_TAB, 'notes');

    } else {

      sessionStorage.removeItem(this.DIAGNOSTICS_TAB);

    }

 

    this.setValuesForStream(analyzerTag);

    this.router.navigate([`analyzer/${analyzerTag}`]);

  }

  

While this allows me to pass the primary key and navigate – the concatenated values have created an issue because the filters now show the concatenated values. Is there a way to intercept the code where the excel like filters are created so I can remove the concatenated values?

Thanks and regards,

Amit