CODEWITHSUNDEEP
javawicket
Domas Poliakas
Domas Poliakas

Reputation: 876

Adding a click behavior to a non-anchor component without using the Link component

I have a DataView, whose html is something like this:

<table>
<thead>
    <tr>
        <td>Username</td>
        <td>First Name</td>
        <td>Last Name</td>         
   </tr>
</thead>
<tbody>
    <tr wicket:id="dataView">
         <td wicket:id="username">Username</td>
         <td wicket:id="firstName">First Name</td>
         <td wicket:id="lastName">Last Name</td>         
    </tr>
</tbody>
</table>

My goal is to make the entire row clickable. I would use a Link component, but I can't - each <tr> element in the dataView is already an Item. Is there an easy way to append the kind of behavior that Link gets when it is not attached to an <a> tag? I.e. the behavior where it generates the javascript to do the link functionality.

Upvotes: 1

Views: 454

Answers (1)

idontevenseethecode
idontevenseethecode

Reputation: 962

Option 1: Add an "onclick" AjaxEventBehavior to each item:

new DataView<T>(id, dataProvider) {

    @Override
    protected void populateItem(Item<T> item) {

        item.add(new AjaxEventBehavior("onclick") {

            @Override
            protected void onEvent(AjaxRequestTarget target) {
                // This will execute when row is clicked
            }

        });

        // Continue populating item here
    }
}

Option 2: If you don't want to use Ajax, you can make all cells in each row a link to the same thing, then use CSS to make the links take up the entire cell space. See this JSFiddle example.

Upvotes: 4

Related Questions