Adding column with url in datagrid

Support
#1

Hi

I need to add a column in a datagrid which has only url’s. The url need to target to the respective web pages. How to proceed on this?

url

Thanks

#2

Hi,

You can use custom renderer. In the documentation and in our sample application you can find some examples on this.

#3

Hi

How to insert a column consisting of links in a table so that on clicking the link it should target to the appropriate web page?

Thanks

#4

I am able to give the url’s but on click it is not targeting to the respective webpage.
Do I need to add anything to that apart from renderer to make it work?

#5

It’s quite hard to understand without the code what is going on. How do you handle click event in the renderer?

#6

I am using column renderer as below…but in the table iam not able to target to the webpage of the corresponding url
tempsnip

tempsnip2

do i need to add any code to make it target to url on click?

#7

In case of a clickable text renderer you have to define a click handler as it is shown in the documentation.

One of the solutions can be found on the forum here and here, if you want to use Table. In the Table, you can specify any column as a link.

For your case I’d probably choose the HtmlRenderer and would do the following:

  1. On an entity, define a generated column that returns a proper HTML reference
public class Dto extends BaseLongIdEntity {
    private static final long serialVersionUID = 4392770322591077081L;

    @Column(name = "NAME")
    private String name;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    @Transient
    @MetaProperty(related = {"name"})
    public String getUrl() {
        return (String.format("<a href=\"%s\">%s</a>", name, name));
    }
}
  1. Then use this property in the browser screen:
                <column id="url" property="url"/>
  1. And finally, created a renderer for this column:
    public void onInit(InitEvent event) {
        DataGrid.HtmlRenderer renderer =
                dtoesTable.createRenderer(DataGrid.HtmlRenderer.class);

        renderer.setNullRepresentation("<span/>");
        dtoesTable.getColumn("url").setRenderer(renderer);
    }

Hope this will help.

#8

Hi

Thanks for the brief description
But even by the use of html renderer the url is not targetting to the web page.
If i click on the column with url entire row is getting selected and no action is being performed.
I added the screenshot for the same.
Any thoughts on this?
tempsnip

#9

It looks like you have implemented notification display as the click handler. Please have a look at another examples that I provided in the previous post.

#10

can you please tell in brief how to handle targetting the url?

#11

Did you try HtmlRenderer, like in the example I posted earlier?

#12

yeah…i tried with the html renderer but no action is getting refelcted on the clicking the link and when i click on that its selecting the whole row.

But what i need is if I click on the column with the link it should target me to the respective web page

Thanks

#13

I guess HtmlRenderer from the code that I provided was not perfectly clear. The attached example does its job properly, please check it out.

untitled.zip (86.5 KB)

#14

Hi @tejasreesatti

Did you manage to implement it?