angulargridviewangular-materialangular-grid

Angular generic-ui set custom href link in cell

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

Solution

  • 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>`;
      },
    },
......