Having the list view onclick work with a checkbox

0
When using the onclick feature on a list view that has a checkbox, the item itself will be clickable, but clicking on the checkbox does nothing, how could this be fixed? I need the whole element to be clickable so just using the checkbox wont work.
asked
3 answers
4

Hi Rocco 

Regards to this issue , you can't make the checkbox clickable , because you already make the 'Editable' option for the listview 'No' , if you make it yes you will lose the onClick action on the listview , 

so I recommend you on that case to make something out of the box , like to

1- insert your checkbox inside a container .

2- make an onClick action for your container

3- make onClick action call a microflow 

4- change the value of the Boolean inside the microflow as the screenshot

image.png

5- for the UI issue ,add class for the checkbox with styling pointer-events: none

I hope this answer your question .

answered
0

You can create a custom class for the checkbox with a class pointer-events: none;

or

You can configure an on change event at the checkbox. So, a on click on the list view, but also a on change event on the checkbox.

answered
0

Hi Rocco, 

 

If I understand you in the right way,

 

In Mendix Studio Pro, if you want the entire list view item to be clickable, including the checkbox, you may need to customize the behavior using some JavaScript. Here's a general approach to achieve this:

  1. Add a Class to List View:

    • Open your Mendix Studio Pro project and navigate to the page containing the list view.
    • Select the List View widget, and in the "Class" property, add a custom class name (e.g., "clickable-list-item").

  2. Custom JavaScript:

    • Create a new JavaScript file in your Mendix project or add it to an existing one.
    • Write a script that captures the click event on the checkbox and triggers the click on the parent list view item. For example:
    •  
    • $(document).ready(function() {    $(".clickable-list-item input[type='checkbox']").on("click", function(event) {        event.stopPropagation(); // Prevents the click event from propagating to the parent        $(this).closest(".clickable-list-item").click(); // Triggers a click on the parent list view item    });});

  3. Add JavaScript to the Page:

    • In Mendix Studio Pro, go to your page.
    • Add a Custom Widget from the Toolbox.
    • Set the widget to the "JavaScript" type.
    • In the widget properties, link the JavaScript file you created.

  4. Adjust List View:

    • Make sure your list view has the "Selectable" property set to "Single" or "Multiple," depending on your requirements.

  5. Test:

    • Run your Mendix app and test whether clicking the checkbox triggers the click event on the entire list view item.

 

** Kindly  accept my answer if it assist you to solve your problem.

answered