Dynamic RCDC with Jquery – Filtering a dropdown based on choice in another dropdown

Alright lets jump right in, we can already done an introduction to RCDC and Jquery. Let me first discuss some of the challenges I faced with this task.

  1. I haven’t yet been able to preset a selected value for a dropdown. Soon to come.
  2. If you use the Jquery hide command, that is (selected #Id option).hide(), it does not work in RCDC, works well in Html and regular xml. Actually I found out later its an IE issue!
  3. The other option one can use is the remove option but unlike Html page in RCDC it breaks the connection to the DOM. Also related to IE!

So what I had to do was to first show all the options, then use what is known as a span to “cover” the options that I do not want to appear. There are two functions created for this

$.fn.hideOption = function () {

this.each(function () {

$(this).wrap(‘<span>’).hide()

});

}

$.fn.showOption = function () {

this.each(function () {

var opt = $(this).find(‘option’).show();

$(this).replaceWith(opt)

});

}

Now in this scenario below we have a dropdown of regions of a global company and the offices in each region we can to filter out offices when a region is selected. e.g Americas selected, only see Americas offices. We are going to update the following files

  • The aspx – Already discuss in the Intro article
  • The RCDC – You have to add the Options for each office and the regions.

In Jquery the field options must match exactly what you have in RCDC. What you will notice in the code is that we are first showing all the options then hide the ones we do not want.

We have a field called “UserRegion” where we have the company’s regions and a field called “OfficeLocation” where we have the regional offices.

function FilterOfficeLocations() {
var AMERICAS = [‘Ontario’, ‘Texas’, ‘New Jersey’, ‘New York’, ‘Barbados’, ‘Virgin Island’];
var EMEA = [‘Mechelen’, ‘Koge’, ‘Moscow’, ‘Barcelona’, ‘Manchester’];
var LATAM = [‘Buenos Aires’, ‘Cartagena’, ‘Tocancipa’, ‘Bogota’, ‘Tijuana’];
var ASPAC = [‘Sydney’, ‘Beijing’, ‘Shanghai’, ‘Mumbai’, ‘Tokyo’];

$.fn.hideOption = function () {
this.each(function () {

$(this).wrap(‘<span>’).hide()
});

}
$.fn.showOption = function () {
this.each(function () {
var opt = $(this).find(‘option’).show();
$(this).replaceWith(opt)

});

}

$(“#ctl00_PlaceHolderMain_CreatePerson_uoc_BasicInfo_grouping_UserRegion_control_internalDropDownList”).change(function () {

mydropdown = $(“#ctl00_PlaceHolderMain_CreatePerson_uoc_BasicInfo_grouping_UserRegion_control_internalDropDownList”).val();
if (mydropdown == “AMERICAS”) {
for (var i = 0; i < AMERICAS.length; i++) {
$(‘#ctl00_PlaceHolderMain_CreatePerson_uoc_BasicInfo_grouping_OfficeLocation_control_internalDropDownList span’).showOption();
}
for (var i = 0; i < EMEA.length; i++) {
$(‘#ctl00_PlaceHolderMain_CreatePerson_uoc_BasicInfo_grouping_OfficeLocation_control_internalDropDownList’).children(‘option[value=”‘ + EMEA[i] + ‘”]’).hideOption();
}
for (var i = 0; i < ASPAC.length; i++) {
$(‘#ctl00_PlaceHolderMain_CreatePerson_uoc_BasicInfo_grouping_OfficeLocation_control_internalDropDownList’).children(‘option[value=”‘ + ASPAC[i] + ‘”]’).hideOption();
}
for (var i = 0; i < LATAM.length; i++) {
$(‘#ctl00_PlaceHolderMain_CreatePerson_uoc_BasicInfo_grouping_OfficeLocation_control_internalDropDownList’).children(‘option[value=”‘ + LATAM[i] + ‘”]’).hideOption();
}
}
if (mydropdown == “EMEA”) {
for (var i = 0; i < EMEA.length; i++) {
$(‘#ctl00_PlaceHolderMain_CreatePerson_uoc_BasicInfo_grouping_OfficeLocation_control_internalDropDownList span’).showOption();
}
for (var i = 0; i < AMERICAS.length; i++) {
$(‘#ctl00_PlaceHolderMain_CreatePerson_uoc_BasicInfo_grouping_OfficeLocation_control_internalDropDownList’).children(‘option[value=”‘ + AMERICAS[i] + ‘”]’).hideOption();
}
for (var i = 0; i < ASPAC.length; i++) {
$(‘#ctl00_PlaceHolderMain_CreatePerson_uoc_BasicInfo_grouping_OfficeLocation_control_internalDropDownList’).children(‘option[value=”‘ + ASPAC[i] + ‘”]’).hideOption();
}
for (var i = 0; i < LATAM.length; i++) {
$(‘#ctl00_PlaceHolderMain_CreatePerson_uoc_BasicInfo_grouping_OfficeLocation_control_internalDropDownList’).children(‘option[value=”‘ + LATAM[i] + ‘”]’).hideOption();
}
}
if (mydropdown == “LATAM”) {
for (var i = 0; i < LATAM.length; i++) {
$(‘#ctl00_PlaceHolderMain_CreatePerson_uoc_BasicInfo_grouping_OfficeLocation_control_internalDropDownList span’).showOption();
}
for (var i = 0; i < EMEA.length; i++) {
$(‘#ctl00_PlaceHolderMain_CreatePerson_uoc_BasicInfo_grouping_OfficeLocation_control_internalDropDownList’).children(‘option[value=”‘ + EMEA[i] + ‘”]’).hideOption();
}
for (var i = 0; i < ASPAC.length; i++) {
$(‘#ctl00_PlaceHolderMain_CreatePerson_uoc_BasicInfo_grouping_OfficeLocation_control_internalDropDownList’).children(‘option[value=”‘ + ASPAC[i] + ‘”]’).hideOption();
}
for (var i = 0; i < AMERICAS.length; i++) {
$(‘#ctl00_PlaceHolderMain_CreatePerson_uoc_BasicInfo_grouping_OfficeLocation_control_internalDropDownList’).children(‘option[value=”‘ + AMERICAS[i] + ‘”]’).hideOption();
}
}
if (mydropdown == “ASPAC”) {
for (var i = 0; i < ASPAC.length; i++) {
$(‘#ctl00_PlaceHolderMain_CreatePerson_uoc_BasicInfo_grouping_OfficeLocation_control_internalDropDownList span’).showOption();
}
for (var i = 0; i < EMEA.length; i++) {
$(‘#ctl00_PlaceHolderMain_CreatePerson_uoc_BasicInfo_grouping_OfficeLocation_control_internalDropDownList’).children(‘option[value=”‘ + EMEA[i] + ‘”]’).hideOption();
}
for (var i = 0; i < AMERICAS.length; i++) {
$(‘#ctl00_PlaceHolderMain_CreatePerson_uoc_BasicInfo_grouping_OfficeLocation_control_internalDropDownList’).children(‘option[value=”‘ + AMERICAS[i] + ‘”]’).hideOption();
}
for (var i = 0; i < LATAM.length; i++) {
$(‘#ctl00_PlaceHolderMain_CreatePerson_uoc_BasicInfo_grouping_OfficeLocation_control_internalDropDownList’).children(‘option[value=”‘ + LATAM[i] + ‘”]’).hideOption();
}
}

});
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s