Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1629
  • Last Modified:

Multiple Dependent Dynamic Dropdownlist Creation

Hi All,

I have an ASP.NET page in which I want to generate an input form dynamically which can contain 'n' number of input rows based on ID provieded by user. So that user can select\fill data on these rows and click on submit to save multiple data in one time.

I am successfully created these input rows with dynamic controls. The problem is that, each row contain two dropdownlist which are dependent on each other i.e. I want to bound second dropdownlist based on the selected value in first dropdownlist. These will be needed in each row.

Please provide me the right approach/solution to follow.
Language: C# ASP.NET
0
Sha_Sha_In
Asked:
Sha_Sha_In
  • 2
  • 2
2 Solutions
 
maXXXeECommented:
use OnSelectedIndexChanged event

<asp:DropdownList ID="d1" runat="server" OnSelectedIndexChanged="d1_OnSelectedIndexChanged"...

codebehind:
protected void OnSelectedIndexChanged(object sender,EventArgs e)
{
      d2.SelectedValue="value to be selected"; //d2 is second dropdown

..........
........
0
 
Sha_Sha_InAuthor Commented:
Hi,

The given solution is well obvious, if you know the control's id as in case of static control. But in my case, the number of controls are dynamic, their id's are dynamically assigned and you have to find out the id of control before each operation. Ok, let me redefine problem,
----------------------
WEB FORM START
----------------------
[Order ID Text Box]                       [Add Controls Button]

Item1       [Input1 Drop Down List]       [Input2 Drop Down List]       [Input3 Text Box]      
Item2       [Input1 Drop Down List]       [Input2 Drop Down List]       [Input3 Text Box]      
Item3       [Input1 Drop Down List]       [Input2 Drop Down List]       [Input3 Text Box]      
.........
.........
ItemN       [Input1 Drop Down List]       [Input2 Drop Down List]       [Input3 Text Box]  

[Submit Button]
-----------------------
WEB FORM CLOSE
-----------------------

Problem:
----------
Here, when user give 'Order ID' and click on 'Add Controls Button', 'N' number of input 'Item' controls are dynamically generated and Id's are assigned to them. Here, when creating controls dynamically, 'Input1 Drop Down List' & 'Input2 Drop Down List' are bound with some values from dataset.

Now I want, when user filling the details against these 'Items' and when selecting 'Input1 Drop Down List', the associated value in 'Input2 Drop Down List' should be automatically selected which can however user change to another value as well. And finally click on 'Submit' to save 'Items' details.

What I am doing right now for problem:
-------------------------------------------------
When creating dynamic controls, I am associating each dynamic dropdown control with 'SelectedIndexChanged' event and making 'true' value of 'autopostback' property of each dynamic dropdown control. Then in the 'SelectedIndexChanged' event, I am finding 'Input1 Drop Down List' of which 'Item' raised the event and then trying to select associated value in same 'Items' 'Input2 Drop Down List'. But it is not happening. When debugging, it is showing Index to always Zero.

??? What can be the issue ???

Thanks In Advance!!!

0
 
maXXXeECommented:
If you are binding the data to your dropdown, try to use the event OnDataBound for the initial values.

protected void Items1_OnDataBound(object sender,EventArgs e)
{
      Items2.SelectedValue="value to be selected";
---
0
 
Sha_Sha_InAuthor Commented:
Hi,

I have not tried the solution given in the last comment because I have already solved my problem myself.
So cheers for me. :)

What I have done,

[1] I added 'OnBlur' JavaScript Attribute in the 'PreRender' event of 'Input1 Drop Down List' and send the Dynamic ID of both 'Input1 Drop Down List' & 'Input2 Drop Down List' from this event to a JavaScript function.

[2] So when user entering the datails in these input rows and leave the focus from 'Input1 Drop Down List', associated value is automatically selected in 'Input2 Drop Down List' (this is done by associating SelectedItem & SelectedValue of both Drop Down List in this JavaScript function), which can user also change to another value or he can go with selected value as well.

[3] It solves my problem very well. And also it saves lot of server round trip time.

Regards,
Sha_Sha_In
0
 
anisniitCommented:
Hi all
Here is a javascript function which make multiple select boxes dependent or cascading easily.
This function uses jQuery for it's operations.
http://www.ajaxray.com/blog/2007/11/08/jquery-controlled-dependent-or-cascading-select-list-2/ 
0

Featured Post

Configuration Guide and Best Practices

Read the guide to learn how to orchestrate Data ONTAP, create application-consistent backups and enable fast recovery from NetApp storage snapshots. Version 9.5 also contains performance and scalability enhancements to meet the needs of the largest enterprise environments.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now