1. Home
  2. Forum
  3. Angular - EJ 2
  4. How to turn a grid's field into a link

How to turn a grid's field into a link

Hello,

I have a hierarchical grid that’s dynamically generated and I want to turn one of the fields of the child list into a hyperlink or button that will open a new window containing more information that the one that's already displayed on the grid.

I’ve been following you documentation: https://ej2.syncfusion.com/16.1.37/documentation/grid/how-to.html?lang=typescript#render-other-components-in-a-column. And I’ve managed to make the link (or button) appear but the column’s field property no longer works correctly (i.e. the content is the one that I placed in the ‘a’ tag of the template which is static).

This is my code:

HTML:

<ejs-grid #grid [dataSource]='requestList' [childGrid]='childList'

height='800px' id="grid" *ngIf="requestList && childList">

<e-columns> ... </e-columns>

</ejs-grid>

TypeScript:

public childList: GridModel = {

dataSource: this.listaValoresPedidos,

queryString: 'NumIntPedido',

allowPaging: true,

pageSettings: { pageSize: 6 },

columns: [

{ field: 'Referencia', headerText: 'Referencia del pedido', width: 120 },

{

headerText: 'Detalles del articulo',

field: 'Descripcion',

template:

`<div style="text-align: center;">

<a rel='nofollow' href="google.com">

test <!--I want to replace the previous word "test" with the content of the "field: 'Descripcion' "-->

</a>

</div>`,

width: 80

},

{ field: 'CantidadPedida', headerText: 'Cantidad Pedida', width: 90 },

//More fields...

]

};

And once it's rendered, the grid field only says "test" in every row.

My main question is: is there a way of introducing the link while maintaining the dynamic aspect of the field?

Also is there a way of binding the new mini template to my original Typescript file? I'm thinking of trying to insert a whole subcomponent instead of just a template, that way I could inherit those functions from one component to the other... But maybe that's not possible and/or there's just a better/simpler way of binding those two things...

Thanks in advance for your help!



3 Replies
PS Pavithra Subramaniyam Syncfusion Team May 1, 2018 04:31 PM UTC

Hi Alberto , 

Query #1: is there a way of introducing the link while maintaining the dynamic aspect of the field? 

You can achieve your requirement by using  column template feature of the Essential JavaScript 2 Grid component. Please refer to the below code example, Documentation link and sample link. 

[component.ts] 
@Component({ 
  selector: 'app-root', 
  templateUrl: './app.component.html', 
  styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements OnInit { 
   public pData: Object[]; 
    public childGrid: GridModel = { 
        dataSource: orderDatas, 
        queryString: 'EmployeeID', 
        columns: [ 
            { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 }, 
            { field: 'CustomerID', headerText: 'Customer ID', template: '#template', width: 150 }, 
           .      .      . 
        ], 
    }; 

    ngOnInit(): void { 
        this.pData = employeeData; 
    } 
} 

[index.html] 
<script id="template" type="text/x-template"> 
    <a rel='nofollow' href="google.com"> 
     ${CustomerID} 
    </a> 
  </script> 


Query #2: is there a way of binding the new mini template to my original Typescript file? 

You can achieve your requirement by using the Detail Template feature of grid component in which you can replace the typescript file. Please refer to the below code example Documentation link. 

[detailtempalte.html] 
<ejs-grid #grid [dataSource]='data' (detailDataBound)='bound($event)' id='Grid'> 
        <ng-template #detailTemplate let-data> 
            <div id='Child'></div> 
        </ng-template> 
        <e-columns> 
         .    .    . 
        </e-columns> 

    </ejs-grid> 

[detailtemplate.component.ts] 
 
@Component({ 
    selector: 'control-content', 
    templateUrl: 'detailtemplate.html', 
    styleUrls: ['detailtemplate.style.css'], 
    encapsulation: ViewEncapsulation.None 
}) 
export class DetailTemplateComponent implements OnInit { 
    public data: any; 
    ngOnInit(): void { 
        this.data = employeeData; 
    } 
bound(e){ 
//Here you can replace the assign the subcomponent to the grid and append it to the detail template. 
let grid: Grid = subcomponent. 
grid.appendTo('#Child'); 

    } 
} 
} 
 


  
 
                              https://ej2.syncfusion.com/16.1.37/angular/demos/#/material/grid/detailtemplate  

Regards, 
Pavithra S. 



AV Alberto Vázquez May 2, 2018 11:01 AM UTC

Thank you for you reply,


Regarding the first query, I’ve copied your example, I changed the data to call my variables, but now it doesn’t show my child list, it only shows “No records to display” in every single row.


I tried your solution to my second question and it worked.


Thanks for your support Pavithra S. !


VA Venkatesh Ayothi Raman Syncfusion Team May 3, 2018 12:39 PM UTC

Hi Alberto, 

Thanks for the update. 

Query #1: ‘No records to display’ 
We were unable to reproduce the reported issue at our end and prepared a sample for your convenience which can be referred from following link, 

Code example: 
this.childGrid = { 
            dataSource: orderDatas, 
            queryString: 'EmployeeID', 
            allowPaging: true, 
            pageSettings: {pageSize: 6, pageCount: 5}, 
            columns: [ 
                       .    .   . 
                { field: 'ShipCity', headerText: 'Ship City', template:'<a rel='nofollow' href="www.syncfusion.com">${ShipCity}</a>' width: 120 }, 
                      .   .  . 
            ], 
            childGrid: this.secondChildGrid 
        }; 

Output Screenshot:  
 

If you still face the same issue, then could you please provide the following details? 
1)      Share the code example of the Child Grid and template. 
2)      Issue screenshot. 
3)      Any script error thrown in console window? If so, share the details. 
4)      A sample if possible or modified the given sample as issue reproducible. 

Query #2: ‘Render the other component as template’ 
We are very happy to hear that your requirement is achieved. 

Regards, 
Venkatesh Ayothiraman.  


Loader.
Up arrow icon