Online forms cascading dropdowns

stan zhen asked on November 6, 2017 06:41

Hi,

I have 2 dropdown list fields on my online form, lets call them ddl A and ddl B. Ddl B's value should depend on the selected option of Ddl A. I've tried creating a custom form control, but what I realize is that when I use that form control on one of the fields, it will have 2 drop downs since I had 2 dropdowns in the custom form controls html.

I'm also not using a custom table, the ddl values are populated by hardcoded values in the code behind of the custom form control.

example:

<asp:DropDownList ID="ddlA" runat="server" OnSelectedIndexChanged="DdlA_SelectChange"/>
<asp:DropDownList ID="ddlB" runat="server" />

Code Behind:

protected void DdlA_SelectChange(object sender, EventArgs e) {

}

Now the control works as I can get it to populate my ddl B based on the value of ddl A. The problem is I need 2 separate drop down fields. The way I have now the form control will render 2 dropdowns in one field.

Problem 1) It renders the 2 dropdown lists on one form field. I need 2 separate ones.

Problem 2) When I submit the form, only the first ddl value gets saved into the database and not the second one because there is no 2nd form field, everything is in one field.

Any help would be appreciated on how I would get this working.

Thanks!

Correct Answer

Matt Nield answered on November 6, 2017 10:25

It really depends how complex your requirements are. I setup a simple example just now; I have a drop down list to tell me the top level pages of my site called FieldA and a second drop down list that will show me all of the child pages of FieldA which I named FieldB.

FieldA has a SQL query of

select ‘please select’ as NodeName, null as NodeAliasPath 
union 
select NodeName, NodeAlisaPath from cms_tree with(nolock) where NodeLevel=1

This field is also set as required and marked as having dependent fields.

FieldB has its Visibility set to FieldA!=null and a SQL query of

select NodeName, NodeAlisaPath from cms_tree with(nolock) where NodeAlisaPath like '{%FieldA%}%'

It is also marked as Depends on another field.

That is a very simple way to get it to work that requires no code behind. So if your structures are simple, you can use that. Where they are more complex, you may want to create your own drop down control, but just keep it simple and use the field dependencies.

If you can, I'd recommend haveing a look at creating macro datasources for your dropdown lists, as this might give you more flexibility. There are some tips for this here: Registering custom macro methods

0 votesVote for this answer Unmark Correct answer

Recent Answers

Matt Nield answered on November 6, 2017 07:26

You can set this up using standard field and form controls by setting the dependency relationship when defining your drop downs. Near the bottom of your field definition, you’ll find Has depending fields and Depends on another field. You can read more about how these work here: https://docs.kentico.com/k10/custom-development/developing-form-controls/reference-field-editor

0 votesVote for this answer Mark as a Correct answer

stan zhen answered on November 6, 2017 08:17

Hey Matt,

Thanks for the reference. Just a quick question, it says to implement logic of dependencies it needs to be implemented in the code of the form control. Where exactly is the code for the used form control? So in my case it would be the drop down form control I'm assuming?

0 votesVote for this answer Mark as a Correct answer