Steer clear of using the onRowClick event for specific columns in a rich:dataTable

In my application, I am dealing with a rich:dataTable that consists of four columns. The first column contains a selectBooleanCheckBox element, which triggers an event named "CheckEvent" in the corresponding bean.

Additionally, the rich:dataTable also supports the onRowClick event, which invokes the "onRowClick" method in the bean.

The issue I am encountering is that when I click on the first column (the checkbox), the onRowClick event is also triggered. This creates a problem because if I simply want to deselect the checkbox, the row gets highlighted due to the onRowClick event firing.

I attempted to define the onRowClick event within the other three columns using rich:columns, but this approach did not yield any results; the event did not trigger at all, resulting in no functionality for the onRowClick event in the dataTable.

Even trying to handle this logic within the bean proved ineffective as I cannot determine which column was clicked when entering the onRowClick() method.

This situation has left me feeling quite frustrated and stuck. Any assistance or guidance on resolving this issue would be greatly appreciated.

javascriptjsfrichfacesonrowclick

Answer №1

To add an `onclick` event on a table row, you can use the `onrowclick` attribute. If you wish to prevent this event from firing when clicking on a checkbox within the row, you can stop the click event from bubbling up to the row using the following code:

<h:selectBooleanCheckbox onclick="event.stopPropagation()" … />

Answer №2

It appears that the code snippet below is effective in solving the issue related to the selectBooleanCheckbox:

Is it possible to achieve a similar outcome if a column with a clickable icon, intended to perform a different function, should not respond to the onclick event? Refer to the sample scenario provided:

<rich:panel headerClass="panelHeader" styleClass="panel">
    <f:facet name="header">Header</f:facet>
    <rich:dataTable id="myTable" value="#{myModel}" var="k">

        <a4j:support event="onRowClick" action="#{myAction.selectItem(k, facesContext.viewRoot.viewId)}"
                            reRender="myTable"/>

            <rich:column>
                <f:facet name="header">
                        <h:outputText value="Normal Column - should be clickable"/>
                </f:facet>
                <h:outputText value="#{k.name}"/>
            </rich:column>

            <rich:column >
                <f:facet name="header">
                    <h:outputText value="Only Click on Icon should react to Mouseclick"/>
                </f:facet>
                <s:graphicImage value="/img/bin_closed.gif">
                    <a4j:support event="onclick"
                                 action="#{myAction.deleteItem(k)}"
                                 reRender="myTable"
                                 ajaxSingle="true" limitToList="true"
                                 onsubmit="if(!confirm('Really?')) { return false; }" />/>
                </s:graphicImage>
            </rich:column>

    </rich:dataTable>

</rich:panel>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Top method for managing missing sub-documents in MongoDB query outcomes

I've seen this question asked in various forms before, but I'm seeking the most efficient way to manage query results without relying on multiple if statements. Imagine I need to locate a product (sub-document) within a package (document) Packa ...

javascriptnode.jsmongodbmongoose

When you hover over them, Material UI icons shrink in size due to the Border

I've been working on a React application that includes Material UI icons in the header. My goal is to add a border at the bottom of each icon when hovered over, but currently, the borders are too close to the icons. Another problem I'm facing is ...

javascripthtmlcssreactjsmaterial-ui

Tips for manipulating and storing nested information within the "state" by utilizing "text input"

Using Material-ui Version: 0.1 The current value stored in state: formatter = [ {currencyField: "", amountField: ""} {accountField: "", amountField: ""} {numberField: ""} ] I am looking to update each element of the object in state ...

javascriptreactjsmaterial-uijsx

What is the most effective method for incorporating multi-line breadcrumb links in a React application?

I am currently working on implementing a multiline breadcrumb link feature for mobile and tablet devices. As users navigate through multiple folders, I need to handle scenarios where the number of links exceeds the maximum allowed in the breadcrumb contain ...

javascripthtmlcssreactjs

A common error message that occurs in programming is "Error: (intermediate value)

I'm experiencing an issue with a cookie popup that I'm trying to interact with or disable in order to ensure the accuracy of my Axe accessibility tests. What would be the most effective approach in this scenario? Currently, I am attempting to cli ...

javascriptselenium-webdriveraxe

Retrieve the class using a text string and then obtain the subsequent string

I am searching for the first class containing the text "Routed:" and then I want to retrieve the following string. I attempted to utilize document.querySelector, but I'm uncertain if this is the correct approach. <td class="msvb2">Routed:</t ...

javascript

Tips for filling jstree with information in Grails

I am currently facing difficulties in populating a jstree within a Grails gsp. Here is what I have attempted so far (rewritten for clarity): <script> $("#treeView").jsTree(); </script> <div id="treeView"> <g:each in="${atomMa ...

javascriptgrailsjstree

Executing a node (console) command from a JavaScript file using AJAX on click

Hey, I'm a beginner in node.js and I have a question: Imagine I have a web application with a button. When the user clicks this button, I want to execute a node console command (e.g. node socket.io). Here's my attempt using jQuery: $( ".button ...

javascriptnode.jsexpresssocket.io

Verify whether the external JavaScript file has already been loaded

After a successful ajax request, I am loading a script using the following code: $.getScript(base_url + 'js/js_to_be_loaded.js'); Is there a way for me to check if that specific script has already been loaded? Thank you. ...

javascriptjquerygetscript

The error message encountered in React says, "Trying to access the 'toString' property of an undefined object leads to a TypeError

Currently, I'm working on a project using the MERN stack. In this project, there's an endPoint for users to update their details. router.put('/updateuser/:id',fetchuser, async (req, res) => { const {name, email, role, password} ...

javascriptreactjsexpressmern

Utilizing ng-options within an ng-repeat to filter out previously chosen options

Facing a simple problem and seeking a solution. I am using ng-repeat to dynamically create select boxes with ng-options displaying the same values. The ng-repeat is used to iterate through model options. <div data-ng-repeat="condition in model.condit ...

javascriptangularjs

Guide: Displaying components within a Vue2 string

Within my Vue2 component, I am working with a string that looks something like this: <template> <div><h1>Hello World</h1> <div v-html="testString"></div> </div> </template> <script> exp ...

javascriptvue.jsvuejs2vue-router

Checking with `validate.js` IF statement

I created a form that includes a hidden field. When the user selects "telephone" using a radio button, an additional field is displayed. For validation purposes, I incorporated validate.js into the form. Everything was functioning correctly until I introd ...

javascriptjqueryformsvalidation

Is there a more effective approach to designing a login screen?

I am just starting out with angular js and this login page is my first step. I have created a basic login form, but when I click on the login() button, the form() does not get submitted and it keeps showing an error message saying "invalid username and pas ...

javascriptangularjs

What is causing the Angular-UI TypeAhead code to display all items instead of filtered items?

I have been experimenting with the angular-ui typeahead directive to create a filtered input box that only shows items based on what has been typed. However, my current code is displaying all the items instead of just the filtered ones. If you'd like ...

javascriptangularjsangular-uitypeaheadangular-ui-typeahead

What is the best way to incorporate Vue.js into a Django project?

We are currently working on a school project that involves creating a complete website using Django and Vue. However, we are facing challenges when it comes to integrating Vue into our Django project. In order to simplify things, we have decided to use Vu ...

javascriptpythondjangovue.js

Discovering a secondary identification for an HTML element that contains multiple IDs

I have a jsp page in my project with the following html structure: <table id="hor-minimalist-a" class="campos"> <thead> <tr> <th>Campo</th> <th>#</th> </tr> </thead> <tfoot ...

javascriptjquery

What is the best way to create transitions for item entry and exit in ReactJS without relying on external libraries?

I am looking to create an animation for a toast notification that appears when a user clicks on a button, all without the use of external libraries. The animation successfully triggers when the toast enters the screen upon clicking the button. However, I e ...

javascriptreactjsreduxcss-transitions

angular-library.js:6 Uncaught TypeError: Unable to access the 'toLowerCase' property of an undefined value

$scope.searchCat = function(){ $scope.searchArray = []; const searchField = document.querySelector('#search input[type="search"]'); if(searchField){ $scope.searchTerm = searchField.value.toLo ...

javascripthtmlangularjs

What could be causing the issue with my dependency injection in my Angular application?

Let's get started angular.module('app', [ 'ngCookies', 'ngResource', 'ngSanitize', 'ngRoute' ]) This is my simple factory. Nothing fancy here angular.module('app') .factory(&apos ...

javascriptangularjsdependency-injectiongruntjsyeoman