1

Grid with radio buttons, make whole cell "clickable"

asked 2014-04-09 21:42:33 +0800

cotupha gravatar image cotupha
23 5

Hello.

I have a grid. Some of the cells of that grid contain radio buttons. When I click on the radio button it gets selected, but I want to be able to select the radio button by clicking anywhere in cell that contains the radio button.

I tried using vflex and hflex for forcing the radio button to use all the available space, but it does not work.

Here is how I am building the grid:

    Rows rows = grid.getRows(); /**grid defined elsewhere**/
    rows.getChildren().clear();
    for ( int i=0; i<7; i++ ) {
        Row row = new Row();
        Value someV = new Value(); /**Some value I defined, it has a text and a radio group as attributes.**/
        row.setValue(someV);

        Hlayout h = new Hlayout();
        h.appendChild(new Label(someV.getText()));
        h.appendChild(someV.getGroup());
        row.appendChild(h);
        for ( int n=0; n<5; n++ ) {
            XRadio xRadio = new XRadio("", someV.getgroup()); /**Extension of Radio that manages radio group**/
            xRadio.setVflex("1");
            xRadio.setHflex("1");
            row.appendChild(xRadio);
        }
        rows.appendChild(row);
    }

How can I do this?

delete flag offensive retag edit

6 Answers

Sort by ยป oldest newest most voted
1

answered 2014-04-29 12:17:08 +0800

cotupha gravatar image cotupha
23 5

Ok, I got it. When a click is made on the cell, the radio button inside that cell is selected. All is done in the client side.

Instead of

cell.addEventListener(Events.ON_CLICK, new EventListener<Event>() {
    @Override
    public void onEvent(Event event) throws Exception {
        xRadio.setChecked(true);
        System.out.println("Cell event");
    }
});

I did

cell.setWidgetListener(Events.ON_CLICK, "this.firstChild.setSelected(true)");

That way, the listener is added in the client and the onClick event is handled completely in the browser.

link publish delete flag offensive edit
0

answered 2014-04-10 02:08:27 +0800

jimmyshiau gravatar image jimmyshiau
4921 5
http://www.zkoss.org/ ZK Team

Hi

Adding the following style

<style>
    .full-space {
        display: inline-block;
        width: 100%;
    }
    .full-space input {
        width: 100%;
    }

</style>

then set a sclass to the radio

radio.setSclass("full-space");
link publish delete flag offensive edit
0

answered 2014-04-20 06:37:05 +0800

cotupha gravatar image cotupha
23 5

Hi @jimmyshiau! I thought your answer worked, but in fact it does not work if the cell is much higher than the radio button. I mean, the clickable area does grow horizontally, but not vertically. If I modify the height, the radio button looks bigger and that is not what I want. Do you have any advice on this?

Thanks!

link publish delete flag offensive edit

Comments

can't you put the Xradio in a cell, append a listener to the cell onclick , change the value of the xradio and append the cell to the row?

chillworld ( 2014-04-20 08:34:08 +0800 )edit

Hi @chillworld, yes,I guess I can do that, but I was looking for a simpler solution. Do you think the click on the cell and on the radio would cause conflicts? I mean, when the radio is clicked, would the cell listener also get the event? Thanks!

cotupha ( 2014-04-21 01:39:23 +0800 )edit

good question, we should have to check that.

chillworld ( 2014-04-21 06:43:08 +0800 )edit

Hi @chillworld, I implemented your suggestion. You can see it in the answer I just posted. Although it works, I would like it to be done completely on the client side. Could you take a look at what I posted? Thanks!

cotupha ( 2014-04-24 01:39:49 +0800 )edit
0

answered 2014-04-24 01:37:44 +0800

cotupha gravatar image cotupha
23 5

As @chillworld suggested, I added a listener for the cell and it works fine.

Here's the code:

        for ( int n=0; n<5; n++ ) {
            Cell cell = new Cell();
            final XRadio xRadio = new XRadio("", someV.getGroup());/**Extension of Radio that manages radio group**/
            cell.appendChild(xRadio);
            cell.addEventListener(Events.ON_CLICK, new EventListener<Event>() {
                @Override
                public void onEvent(Event event) throws Exception {
                    xRadio.setChecked(true);
                    System.out.println("Cell event");
                }
            });
            cell.setStyle("cursor:pointer;");
            row.appendChild(cell);
        }

So, as I said, this works fine, but I think it's a lot of useless traffic to the server. I mean, this could be done locally in the client, right? No need to go and tell the server that a cell was clicked. I started looking into widgets, but I still do not understand how this could be done with a widget using Java.

Any ideas?

Thanks!

link publish delete flag offensive edit
0

answered 2014-04-24 08:04:58 +0800

chillworld gravatar image chillworld flag of Belgium
5357 4 9
https://github.com/chillw...

Oke I'll did some research, it should be possible.

I have found 3 site's where do you need to take a look and try to find it :

http://zkframeworkhint.blogspot.be/2013/07/how-to-call-javascript-function-from.html

http://forum.zkoss.org/question/75753/add-javascript-call-to-component-in-java-code/

http://books.zkoss.org/wiki/ZKClient-sideReference/GeneralControl/EventListening#DeclareaClient-sideListenerin_ZUML

I hope this can be of help to you (Mine javascript was long time ago so I have to do back research if I want to create it for you and I don't have that time ATM)

Greetz chill.

link publish delete flag offensive edit
0

answered 2014-04-24 11:18:11 +0800

cotupha gravatar image cotupha
23 5

Thanks, @chillworld, I will look into it.

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
2 followers

RSS

Stats

Asked: 2014-04-09 21:42:33 +0800

Seen: 45 times

Last updated: Apr 29 '14

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More