Jump to content
  • 0

Listbox without ability to select (just view)


KG360
 Share

Question

I want to show a list of values, for information only, but not selection (that comes later). Now I use a virtual field cascading listbox to display the values and want to allow the user to scroll to review, but it should not appear as if they can make a selection. Even if I state clearly ONLY FOR VIEWING some users may get confused...

Is there a better solution than using the listbox with what might look as selectable values?

Cheers / G

 

Link to comment
Share on other sites

10 answers to this question

Recommended Posts

  • 0

Hi @Gunnar360c,

you can use the following script by adding it on the footer:

<script type="text/javascript">
    document.querySelector("#cbParamVirtual1").disabled = "true"

</script>

 

replace the 1 in cbParamVirtual1 based on your listbox virtual field. if it's the second virtual field, use 2, if it's the third, use 3, and so on.

Link to comment
Share on other sites

  • 0
10 hours ago, futurist said:

Hi @Gunnar360c,

you can use the following script by adding it on the footer:

<script type="text/javascript">
    document.querySelector("#cbParamVirtual1").disabled = "true"

</script>

 

replace the 1 in cbParamVirtual1 based on your listbox virtual field. if it's the second virtual field, use 2, if it's the third, use 3, and so on.

Many thanks! The list box does however behave the same as without the script, it looks as if an item is selected as it highlights the same way as before. Any idea?

Link to comment
Share on other sites

  • 0

This should do the trick.

document.addEventListener('DataPageReady', function() {

  options = document.getElementById("cbParamVirtual1");
    for ( i=0; i<options.length; i++) {
      options[i].style.pointerEvents = "none";
    }

})

Using pointer-events on the Listbox element itself would prevent you from being able to scroll. But, if we use it on the options themselves, we should be able to scroll the Listbox without being able to click/select any of the options.

Link to comment
Share on other sites

  • 0
On 8/30/2022 at 7:51 PM, telly said:

Hi @Gunnar360c,

You can try using pointer-events:

<style>
option {
    pointer-events: none;
}
</style>

Thanks, and sorry for late reply: This style works, but it disables all pointing events. I just need to disable one specific field.

Link to comment
Share on other sites

  • 0
On 8/30/2022 at 6:02 PM, kpcollier said:

This should do the trick.

document.addEventListener('DataPageReady', function() {

  options = document.getElementById("cbParamVirtual1");
    for ( i=0; i<options.length; i++) {
      options[i].style.pointerEvents = "none";
    }

})

Using pointer-events on the Listbox element itself would prevent you from being able to scroll. But, if we use it on the options themselves, we should be able to scroll the Listbox without being able to click/select any of the options.

Many thanks and sorry for the late reply. The script does not affect my listbox in any way. It might be that if I had tried to use a selected value this would not work, but as you know i just want to disallow the user to click on one item as they may believe they have actually selected something. I appreciate all three inputs and solutions, but none of them work (or I hav done something wrong..) . I am thinking of redesigning the logic so when I show a list box the user may select from it so the listbox is used as intended...

Link to comment
Share on other sites

  • 0

I think there are 2 problems with my last script. Since this is a cascading virtual listbox, it most likely has the Unique Suffix attached to it, so the 'document.getElementById' line won't work. We'll either need to try a queryselector instead, or use the uniqueSuffix function that is on the Ajax Loading help page on Caspio Support page. 

Cascading might be causing another issue by causing a delay in the values loading due to it cascading from a parent element. So, we might also need to put a delay somewhere.

Seems like @telly's should still work, not sure why it isn't.

I can't check right now but when I get back to the office I'll try and mess around with it

Link to comment
Share on other sites

  • 0
On 9/4/2022 at 1:17 AM, Gunnar360c said:

Thanks, and sorry for late reply: This style works, but it disables all pointing events. I just need to disable one specific field.

Hi, 

You can specify which virtual field you want to disable so that the other fields wont be affected, like so:

<style>
[name='cbParamVirtual1'] option {
    pointer-events: none;
}
</style>

 

make sure to change cbParamVirtual1 with your corresponding virtual field.

Link to comment
Share on other sites

  • 0
16 hours ago, futurist said:

Hi, 

You can specify which virtual field you want to disable so that the other fields wont be affected, like so:

<style>
[name='cbParamVirtual1'] option {
    pointer-events: none;
}
</style>

 

make sure to change cbParamVirtual1 with your corresponding virtual field.

Many thanks @futurist- the script works fine now, and I can show the desired items in a list box without allowing the user to choose any - perfect !!

Link to comment
Share on other sites

  • 0

All, @telly , @kpcollier, and @futurist- many thanks for the input. At this point, the script I got from @futurist works nicely:

<style>
[name='cbParamVirtual1'] option {
    pointer-events: none;
}
</style>

The script from @tellydisable all pointing  events. The script from @kpcollier I did not manage to get working.

Many thanks for invaluable contributions and your expertise, it enables me to do what I aspire to accomplish!

Gunnar

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...