1

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

enter image description here

Sam
  • 136
  • 7

1 Answers1

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>`;
      },
    },
......
wei
  • 937
  • 2
  • 14
  • 34
  • 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' },` – Sam Dec 12 '22 at 07:51
  • @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` https://stackblitz.com/edit/angular-grid-quick-start-mi6byv?file=src/string-food/string-food.component.ts – wei Dec 12 '22 at 08:00
  • thanks for helping out.. it is working as expected – Sam Dec 12 '22 at 09:58
  • 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 `${obj.companyGuid}`; }, width: 330 },` – Sam Dec 12 '22 at 10:59
  • @Sam cause Angular handle event differently, since the link created dynamically, you have to register after the grid is rendered. See https://stackblitz.com/edit/angular-grid-quick-start-mi6byv?file=src/string-food/string-food.component.ts – wei Dec 13 '22 at 03:11
  • Thanks for this help... I want to show mat-icon but it is not displaying.. Below is code for that.. can you please check it if you have any idea on this. `{ header: 'Company Guid', field: 'companyGuid', view: (value: string, obj: any) => { return ` ${obj.companyGuid} ` + `file_copy `; }, width: 330 },` – Sam Dec 13 '22 at 06:57
  • @Sam the github issue I linked in my answer are using mat icon, you can try follow the code. https://github.com/generic-ui/generic-ui/issues/11 – wei Dec 13 '22 at 07:38