Solved

Multiple Dependent Dynamic Dropdownlist Creation

Posted on 2008-06-24
5
1,623 Views
Last Modified: 2013-11-26
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
Comment
Question by:Sha_Sha_In
  • 2
  • 2
5 Comments
 
LVL 7

Expert Comment

by:maXXXeE
ID: 21875976
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
 

Author Comment

by:Sha_Sha_In
ID: 21876782
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
 
LVL 7

Assisted Solution

by:maXXXeE
maXXXeE earned 20 total points
ID: 21889454
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
 

Accepted Solution

by:
Sha_Sha_In earned 0 total points
ID: 21891705
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
 

Expert Comment

by:anisniit
ID: 22435132
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

New Relic: Our company recently started researching several products to figure out what were the best ways for us to increase our web page speed and to quickly identify performance problems that we may be having. One of the products we evaluated wa…
This article shows how to deploy dynamic backgrounds to computers depending on the aspect ratio of display
Wufoo.com provides powerful tools for surveying targeted groups, and utilizing data from completed surveys to find trends, discover areas of demand or customer expectation, and make business decisions on products or services.
Learn how to set-up custom confirmation messages to users who complete your Wufoo form. Include inputs from fields in your form, webpage redirects, and more with Wufoo’s confirmation options.

776 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question