TheCoder4eu / BootsFaces-OSP

BootsFaces - Open Source Project
Apache License 2.0
246 stars 102 forks source link

dataTable onselect is fired when expansion button is clicked. #1013

Closed ghost closed 5 years ago

ghost commented 6 years ago

I created a responsive dataTable with onselect. The onselect works perfectly well, but when the dataTable renders with the expansion button for rows, both events are fired on clicking the expansion button.

The same issue occurs when there are other actions in the row(E.g. Icons to Delete). Both actions are fired.

I am using Bootsfaces 1.3.0 and PrimeFaces 6.2

stephanrauh commented 6 years ago

Actually, I wasn't even aware we've already implemented expandable rows. I'd guess it's still in our list of open issues. Did you implement the feature yourself?

ghost commented 6 years ago

No. This is what I meant by expandable rows.

image

stephanrauh commented 6 years ago

I feel stupid - the demo rings a bell, it's a screenshot from our showcase, but still, I don't find it. Can you help me?

Nonetheless, I can help you with the buttons you've added to the datatable. Just add an return false; to the onclick handler of the button. Strictly speaking, it should be preceded with an javaScript: prefix, but the simple and intuitive version seems to do the trick just as well:

 <b:dataTableColumn>
      <b:commandButton value="edit" icon="edit" ajax="true" update="@(.editableCarTable)"
              onclick="ajax:car.edit(); return false;" >  <!-- <<<< add the return statement here -->
      </b:commandButton>                                    
 </b:dataTableColumn>
ghost commented 6 years ago

https://showcase.bootsfaces.net/forms/DataTable.jsf The example table under the section 'Responsiveness' loads like this in mobile devices.

And for the button onclick, I tried your fix, it is not working in my application.

<b:dataTableColumn>
    <b:commandButton ajax="true" onclick="ajax:bean.delete(var.id);javascript:return false;" update="@(.table)">
        <h:graphicImage library="folder" name="imageName.abc"/>
    </b:commandButton>
 </b:dataTableColumn>
stephanrauh commented 6 years ago

Ah, that's why I didn't find the demo! The expand/collapse buttons are added automatically by the JavaScript component, so I'm afraid there's little we can do about it. But I'll have a look nonetheless.

Concerning the buttons: strange, it did work when I tested it. Maybe you have to call event.preventDefault() instead of return false.

stephanrauh commented 5 years ago

Ah, this only happens if the commandButton is in the first column. Put it in the second column, and you won't have any conflicts.

After looking at the implementation, I have little hope to solve the bug. So I've documented it in the showcase.