Multiple columns hyperlink in ejs grid

[Narsimsetty Chalamaiah]

HI 

i used below code for hypelink in ejs grid. 

when i go click refresh button data hyperlink is not showing 

please find attached file.

Default.html 

 

<ejs-grid #grid [dataSource]='data' [allowPaging] = 'true'>  

            <e-columns> 

      <ng-template #template  ngFor let-column [ngForOf]="columns"> 

             <e-column [field]="column.field"  

                       [headerText]="column.headerText" 

                       [allowEditing]="column.allowEditing" 

                       [isPrimaryKey]="column.isPrimaryKey != null ? column.isPrimaryKey : null" 

                       [width] = "column.width" > 

            </e-column> 

       </ng-template> 

    </e-columns> 

    </ejs-grid> 

     

<ng-template let-data #template2> 

    <a rel='nofollow' rel='nofollow' rel='nofollow' href="#">{{data.FirstName}}</a> 

     

</ng-template> 

Default.component.ts 

 

export class DefaultComponent implements OnInit { 

  public data: Object[] = []; 

  public gridData: any; 

  public template: any; 

    @ViewChild('template2') 

  public temp2: NgModel; 

  @ViewChild('grid') 

  public grid: Grid; 

  public columns: any; 

  ngOnInit(): void { 

 

    this.data = employeeData; 

    this.columns = [{ field: "EmployeeID", isPrimaryKey: "true", headerText: "Employee ID", width: "90" }, 

    { field: "FirstName", headerText: "First Name", width: "90" }, 

    { field: "LastName", headerText: "Last Name", width: "90", allowEditing: false }, 

    { field: "Country", headerText: "Country", width: "90" }] 

  } 

 

  ngAfterViewInit(): void { 

    (this.grid.getColumns()[2].template as any) = this.temp2; 

  } 

 

} 

Attachment: ejsgridhyperlink_340d74fe.zip

[Rajapandiyan Settu]

Hi Narsimsetty, 

Greetings from Syncfusion support. 

Query: when i go click refresh button data hyperlink is not showing  

We tried to reproduce the reported behavior with the provided code example. But, it was unsuccessful at our end. The column template rendered properly when refreshing Grid by a button click. Refer to the sample for more information. 

 

Sample: https://stackblitz.com/edit/angular-eudkou-abckjn?file=app.component.ts 

 

If you still face the issue, please share the below details to replicate the same at our end. 

 

1. Complete Grid code you have used.
2. Screenshot of Syncfusion packages version in package.json file.
3. When you faced the reported issue? Share the replication procedure and code example for this.
4. If possible, share a simple issue reproducible sample or make the issue in the given sample.

Regards, 

Rajapandiyan S 

[Narsimsetty Chalamaiah]

Hi I used below code for hyperlink , 

when we are page loading i am giving this.data=[], this.columns=[],

when i click button of refresh button , not loading hyperlink.

import { Component,ViewChild, OnInit} from '@angular/core';

import { orderDetails } from './data';

import { GroupService, SortService, GridComponent } from '@syncfusion/ej2-angular-grids';

@Component({

    selector: 'app-root',

    templateUrl: 'app.component.html'

})

export class AppComponent {

    public data: Object[] = [];

    public columns: Object[] = [];

  public template: any; 

  @ViewChild('template2')

  public template2: any; 

 

  @ViewChild('grid') public grid: GridComponent;

    ngOnInit(): void {

        this.columns = [];

        this.data =[];

}

ngAfterViewInit(): void { 

    (this.grid.getColumns()[5].template as any) = this.template2; 

  } 

  refreshbtnclick(args){

    debugger;

   

     this.columns = [

      { headerName: "Talking Track", field: "TalkingTrack", index: 0, visibility: false },

      { headerName: "Open Items", field: "OpenItems", visibility: false, index: 1 },

      { headerName: "Collector Name", field: "CollectorName", visibility: false, index: 2 },

      { headerName: "Phone No", field: "PhoneNo", visibility: false, index: 3 },

      { headerName: "SSO#", field: "Ssoid", visibility: true, index: 4 },

      { headerName: "Name", field: "Name", visibility: true, index: 5 },

      { headerName: "Customer #", field: "CustomerNo", visibility: true, index: 6 }]

    this.data = [{

      Address: "11 BD ANATOLE FRANCE,AUBERVILLIERS  FRANCE 93300,,FR",

      Balance: "0.00",

      BillingCurrency: "EUR",

      BusinessAlias: "495014",

      CCNumber: "CH41",

      CaseId: "Check LaSCA",

      City: "AUBERVILLIERS",

      CollectorName: "BATHILY, SAMBA",

      CustomerNo: "0002345609",

      Definer: "",

      ExtendedName: "",

      IsSensitiveCustomer: "",

      Name: "SOC D IMAGERIE MEDICALE D AUBERV",

      NativeAddress: "",

      OpenItems: "0",

      OrgId: "88",

      PLName: "HEALTHCARE DI FR - CUSTOMER CREATION",

      ParentSub: " ",

      PhoneNo: " FX:",

      Ssoid: "000000000",

      Status1: "In-Active",

    }, {

      Address: "6029 - 3RD STREET S.E.,CALGARY ALBERTA T2H 1K3,,CA",

      Balance: "0.00",

      BillingCurrency: "CAD",

      BusinessAlias: "0001ZTTsMAAX",

      CCNumber: "CNWW",

      CaseId: "Check LaSCA",

      City: "CALGARY",

      CollectorName: "CHANDRAN, BINA",

      CustomerNo: "0002345639",

      Definer: "",

      ExtendedName: "",

      IsSensitiveCustomer: "",

      Name: "VECTOR ELECTRIC AND CONTROLS",

      NativeAddress: "6029 - 3RD STREET S.E.,,,,,CA,AB,CALGARY,T2H 1K3",

      OpenItems: "0",

      OrgId: "",

      PLName: "DI-DG19-NAM-JAX-CAD",

      ParentSub: " ",

      PhoneNo: "[phone] FX:",

      Ssoid: "000000000",

      Status1: "In-Active"

    }

    ];

     this.grid.refresh();

  }

}

<div class="control-section">

    <ejs-grid #grid [dataSource]='data' [allowPaging] = 'true'>

      

            <e-columns>

      <ng-template #template  ngFor let-column [ngForOf]="columns">

             <e-column [field]="column.field" 

                       [headerText]="column.headerText"

                       [allowEditing]=false                     

                       [width] = 200 >

            </e-column>

       </ng-template>

    </e-columns>

    </ejs-grid>

    

<ng-template let-data #template2>

    <a rel='nofollow' rel='nofollow' href="#">{{data.FirstName}}</a>

    

</ng-template>

</div>

Attachment: ejsgridhyperlink_72d52856.zip

[Rajapandiyan Settu]

Hi Narsimsetty, 

Thanks for your update. 

Query: when we are page loading i am giving this.data=[], this.columns=[], when i click button of refresh button , not loading hyperlink. 

In EJ2 Grid, we are not supposed to render a Grid with both dataSource and columns as empty or undefined. We must define at least anyone of these property to render a Grid in DOM. 

In your code, you have set the column as empty at initial rendering of Grid. So, this.grid.getColumns() gives undefined in the ngAfterViewInit. 

Screenshot : getColumns()[5] gives undefined as  grid.columns is empty 

 

To bind the template in Grid column, we need to initialize the columns before rendering the Grid. we have prepared a sample for this, please find it from the below link. 

 

 

ngOnInit(): void { 

// define columns before initial rendering of Grid 

    this.columns = [ 

      { headerName: "Talking Track", field: "TalkingTrack", index: 0, visibility: false }, 

      { headerName: "Open Items", field: "OpenItems", visibility: false, index: 1 }, 

      { headerName: "Collector Name", field: "CollectorName", visibility: false, index: 2 }, 

      { headerName: "Phone No", field: "PhoneNo", visibility: false, index: 3 }, 

      { headerName: "SSO#", field: "Ssoid", visibility: true, index: 4 }, 

      { headerName: "Name", field: "Name", visibility: true, index: 5 }, 

      { headerName: "Customer #", field: "CustomerNo", visibility: true, index: 6 }] 

  } 

  ngAfterViewInit(): void { 

// bind template to the column before rendering the Grid 

    (this.grid.getColumns()[5].template as any) = this.template2; 

  } 

 

 

Sample: https://stackblitz.com/edit/angular-eudkou-7pvznv?file=app.component.ts  

Please get back to us if you need further assistance with this. 

Regards, 

Rajapandiyan S