Angular generic-ui set custom href link in cell

Question

I am using https://generic-ui.com/ grid in angular version.

It is working fine. I have already displayed grid and all data in that.

Now in one cell I want to set a href link. but in that cell text should be different and a href link should be different.

I have followed their example but they have given example like text and link both are same so in grid in cell it is displaying that. See below for more details.

In below image you can see LINK column has href link set. for that code is below.

{
        header: 'GuiCellView.LINK',
        field: 'wiki',
        type: GuiDataType.STRING,
        view: GuiCellView.LINK
    },

And the field wiki has this value in .ts file

const food = [{
    name: 'Avocado',
    wiki: 'https://en.wikipedia.org/wiki/Avocado',
    image: '//upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Persea_americana_fruit_2.JPG/220px-Persea_americana_fruit_2.JPG'
}];

But what I want to achieve like in wiki it should be click here and when user click there then it should open one link, but I did not found any way to set some custom link.

I mean like in wiki : 'Click here' -- So in cell it will display click here but I want to set href link over there.

You can see demo here : https://generic-ui.com/guide/columns

wei · Accepted Answer · 2022-12-12 07:59:08Z

2

You can use custom HTML to achieve that.

https://stackblitz.com/edit/angular-grid-quick-start-mi6byv?file=src/string-food/string-food.component.ts

https://github.com/generic-ui/generic-ui/issues/11

......
    {
      header: 'GuiCellView.LINK',
      field: 'wiki',
      type: GuiDataType.STRING,
      view: (value: string, obj: any) => {
        return `<a href="${value}" target="_blank">${obj.name}</a>`;
      },
    },
......

edited Dec 12, 2022 at 7:59

answered Dec 12, 2022 at 7:39

wei

1,0182 gold badges17 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Sam Over a year ago

Thanks for sharing this code.. I see that but my problem is I need to use companyGuid value which is coming in another field. see this below.

{       header: 'Company Name',       field: 'companyName',       view:  // So here I need to set URL with this companyGuid which is below in second field.     },     {       header: 'Company Guid',       field: 'companyGuid'     },

wei Over a year ago

@Sam please refer to my updated answer, in second parameters, all the row values return as object, so you can just change to obj.companyGuid stackblitz.com/edit/angular-grid-quick-start-mi6byv?file=src/…

Sam Over a year ago

thanks for helping out.. it is working as expected

Sam Over a year ago

I am trying to call one function on click even but function is not calling any idea on this.. Below is code. { header: 'Company Guid', field: 'companyGuid', view: (value: string, obj: any) => { return <a href="javascript:;" (click)="onClickDelegateAccess(${obj.companyGuid})" target="_blank">${obj.companyGuid}</a>; }, width: 330 },

wei Over a year ago

@Sam cause Angular handle event differently, since the link created dynamically, you have to register after the grid is rendered. See stackblitz.com/edit/angular-grid-quick-start-mi6byv?file=src/…

|

Collectives™ on Stack Overflow

Angular generic-ui set custom href link in cell

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related