Customize hyperlinks

[sipungora]

Hi,

e.g. I have in my grid a link column. I want that some action will be executed by click on a link and not call of some html site. How can I realise this?

Thank you beforehand,
best regards.

[Isomorphic]

The simplest thing is to use formatCellValue to output a link with a "javascript:" URL that calls the method you choose.

[sipungora]

Thank you very much.

Your idea is clear. But I don't quite understand, how it works. Would you explain me this a little bit detailed?

[Isomorphic]

Hmm, actually, given that you are working with GWT, the best approach is probably to use ListGridField.setBaseStyle to set the CSS style of the cell to one that looks like a link, then use the ListGridField recordClick event to react to the link being clicked on.

[sipungora]

Thank you very much.

[flitt]

Hmm, actually, given that you are working with GWT, the best approach is probably to use ListGridField.setBaseStyle to set the CSS style of the cell to one that looks like a link, then use the ListGridField recordClick event to react to the link being clicked on.

I've defined css style for list grid:

.grid-link {
	color: red;
	text-decoration: underline;
}

Redefined the base style of grid field:

ListGridField customerId = new ListGridField(FIELD_CUSTOMER_ID, 60);
customerId.setBaseStyle("grid-link");

The result list grid clumn with redefined style seems broken:


What I'm doing wrong?

[Isomorphic]

At a glance, most likely your style is not being loaded successfully.

[kevboy]

I wanted to do the same except for when a cell is clicked. I'm did something similar to the suggested advice and it works fine. However, the added click handler gets invoked when the whole cell is clicked.

Is there anyway to add a click handler to just the text of the link instead of the whole cell? Thanks!

[Isomorphic]

That seems like a convenient thing to happen since there's presumably nothing else in the cell that would represent a distinct click? Avoiding this effect would require you to write out your own HTML <a> tag and wire it to call GWT code via JSNI, which may not be worth it.

[kevboy]

If it's easier, is there a way to use a hover (rollover) style on when the cursor is over the cell only?

Currently, I set a base style to make the link look like a regular underlined blue link. I then define an Over style to change the link to an orange color. This way, it's more apparent when the user puts the cursor over the link.

However, the Over style gets applied when the cursor is anywhere over a row instead of applied when the cursor is just on the cell.

Again, thanks for your help!

[Isomorphic]

You could make that dynamic by implementing the change in color as a getCellCSSText() override that checks getEventCol() to see if the mouse is over that particular cell.

[kevboy]

We're still using SmartGWT 2.3 (hoping to upgrade to 2.4 when our schedule will allow). Is there an easy way to access the mentioned method through JSNI using 2.3? If not, I'll try it out when we upgrade to 2.4. Thanks!

[Isomorphic]

It would be the same in either version. This poster explains how you would create an HTML link that calls a GWT method via JSNI.