Question
CGI
IN
Last activity: 16 Oct 2018 12:03 EDT
Disable already selected value from drop down list
Use case: Disable already selected value from drop down list
Query 1: How to disable already selected value from Autocomplete and DynamicSelect/ dropdown control.
Query 2: If not possible in Autocomplete and DynamicSelect/ dropdown control, then what is the option.
We need similar behaviour in below screen shot taken from PDN.
Thanks in Advance.
***Edited by Moderator Marissa to update categories***
**Moderation Team has archived post**
This post has been archived for educational purposes. Contents and links will no longer be updated. If you have the same/similar question, please write a new post.
Pegasystems Inc.
IN
I believe there is no OOTB way to achieve this with Auto-complete or Dropdown control. This will need some customization.
@Vidyaranjan Could you pull someone from PDN development team to help out here on this control.
Pegasystems Inc.
IN
Hello Rajasekhar,
Thanks for posting queries in PDN.
As per Rawap's reply you may need to customize to achieve this requirement.
I hope the below article will help you in customization using javascript and jQuery.
Thanks & Regards,
Durga
Pegasystems Inc.
IN
Hello Rajasekhar,
Sorry for delay in response since I am quit busy .
I will try to create the scenario with your requirement and will update you soon .
Meanwhile , you can also try by using developer tools inspecting the dropdown element and get the class/ id and implement the below jquery script in Auto - generated section or userworkform
$(document).ready(function() {
$(".preferenceSelect").change(function() {
// Get the selected value
var selected = $("option:selected", $(this)).val();
// Get the ID of this element
var thisID = $(this).prop("id");
// Reset so all values are showing:
$(".preferenceSelect option").each(function() {
$(this).prop("disabled", false);
});
$(".preferenceSelect").each(function() {
if ($(this).prop("id") != thisID) {
$("option[value='" + selected + "']", $(this)).prop("disabled", true);
}
});
});
});
Thanks & Regards,
Durga
Pegasystems Inc.
IN
Hi Rajasekhar,
Adding point to above reply.
The code provided is just a sample.
Once you got the class/id of the dropdown element then replace the ".preferenceSelect" with your class/id.
Thanks & Regards,
Durga
CGI
IN
Hi Durga,
We tried and it is not working. could please guide by details.
As you mentioned, we identified the dropdown id
In userworkform added below code
<script>
$(document).ready(function() {
$(".NewWorkCaseType").change(function() {
// Get the selected value
var selected = $("option:selected", $(this)).val();
// Get the ID of this element
var thisID = $(this).prop("id");
// Reset so all values are showing:
$(".preferenceSelect option").each(function() {
$(this).prop("disabled", false);
});
$(".preferenceSelect").each(function() {
if ($(this).prop("id") != thisID) {
$("option[value='" + selected + "']", $(this)).prop("disabled", true);
}
Hi Durga,
We tried and it is not working. could please guide by details.
As you mentioned, we identified the dropdown id
In userworkform added below code
<script>
$(document).ready(function() {
$(".NewWorkCaseType").change(function() {
// Get the selected value
var selected = $("option:selected", $(this)).val();
// Get the ID of this element
var thisID = $(this).prop("id");
// Reset so all values are showing:
$(".preferenceSelect option").each(function() {
$(this).prop("disabled", false);
});
$(".preferenceSelect").each(function() {
if ($(this).prop("id") != thisID) {
$("option[value='" + selected + "']", $(this)).prop("disabled", true);
}
});
});
});
</script>
Pegasystems Inc.
IN
Hello Rajasekhar,
Sorry for delay in response .
Please try with below code snippet and let me know the outcome.
$(document).ready(function() {
$("#NewWorkCaseType").change(function() {
// Get the selected value
var selected = $("option:selected", $(this)).val();
// Get the ID of this element
var thisID = $(this).prop("id");
// Reset so all values are showing:
$("#NewWorkCaseType option").each(function() {
Hello Rajasekhar,
Sorry for delay in response .
Please try with below code snippet and let me know the outcome.
$(document).ready(function() {
$("#NewWorkCaseType").change(function() {
// Get the selected value
var selected = $("option:selected", $(this)).val();
// Get the ID of this element
var thisID = $(this).prop("id");
// Reset so all values are showing:
$("#NewWorkCaseType option").each(function() {
$(this).prop("disabled", false);
});
$("#NewWorkCaseType").each(function() {
if ($(this).prop("id") != thisID) {
$("option[value='" + selected + "']", $(this)).prop("disabled", true);
}
});
});
});
Thanks & Regards,
Durga
Pegasystems Inc.
IN
Hello Rajasekhar,
Can you place the alerts(thisID)/console.log(thisID) and check whether it is displaying the 'id' of the selected option properly or not. You can confirm this by inspecting the select option element.
Actually this needs debugging the code to check where exactly its failing.
Thanks & Regards,
Durga
CGI
IN
Could you please let me know, where to place the alerts(thisID) in below code
$(document).ready(function() {
$("#NewWorkCaseType").change(function() {
// Get the selected value
var selected = $("option:selected", $(this)).val();
// Get the ID of this element
var thisID = $(this).prop("id");
// Reset so all values are showing:
$("#NewWorkCaseType option").each(function() {
$(this).prop("disabled", false);
});
Could you please let me know, where to place the alerts(thisID) in below code
$(document).ready(function() {
$("#NewWorkCaseType").change(function() {
// Get the selected value
var selected = $("option:selected", $(this)).val();
// Get the ID of this element
var thisID = $(this).prop("id");
// Reset so all values are showing:
$("#NewWorkCaseType option").each(function() {
$(this).prop("disabled", false);
});
$("#NewWorkCaseType").each(function() {
if ($(this).prop("id") != thisID) {
$("option[value='" + selected + "']", $(this)).prop("disabled", true);
}
});
});
});
Thanks in Advance..........
Pegasystems Inc.
IN
Hello Raj,
Alternatively, how about using multi-select control. With this control, on selecting a value(say Abigail starting with ab letters), it is not listed again(equivalent to getting disabled) in the list. Refer the below screen shot:
PS: Screen shot taken from Pega 7.3.1.
Regards,
Rincy
Ncs Pte Ltd
SG
I think you can create similar functionality by using auto complete and repeating dynamic layout.
1. Create two Page list. One for your source and one for selected items. Add auto complete control with source pagelist.
2.Above autocomplete add one repeating dynamic layout with selected item pagelist, in repeating dynamic layout add a section and in that section use a formatted text/text input with selected items pagelist property name.
3.Now on selection of item from autocomplete. Run a data transform or activity to copy selected item from source pagelist to selected item pagelist and delete item from source pagelist.
4.Same thing you can use to delete item from repeating dynamic layout add back item to source pagelist i.e autocomplete
Pegasystems Inc.
US
Hi @RajasekharU0829,
After reviewing this with our SMEs in GCS, we have decided your best bet would be to get in touch with our Consultint Team to help you with this. Please contact your Account Executive to get that set up.
Thanks!