EditForm Synchronize dropdown lists

[Dimitrios]

I have two dropdownlists on an ascx control (ddlItemCode and ddlItemDescr).
They both have the same data as source. The only difference is the the fist one shows the code and the other one the description of the item. 

In the code behind:

ddlItemCode.Attributes.Add("onChange", "return ddlcodeOnSelectedIndexChange(this,'ddlItemCode');")

and for both lists...
ddlItemxxxx.DataValueField = "Itm_ID"

When the page opens, both lists have Itm_ID = 1853
(so the attached screen image below makes some sense)

On the shown script, I am trying to synchronize the right list (ddlItemDescr), so it selects the item which is selected on left list (ddlItemCode).

As you see on the screen image, the user selects the third entry (Itm_ID = 1857), but right list remains on the first selection. The watch expressions have been updated when the code reached the breakpoint.

In simple words, the command ddlto.val(newvalue) does not work!

Although it sounds stupid, I did try ddlto.val("1857") in the code just to check and still there was no change.

I would appreciate any help...

[Princy]

Hi Dimitrios,

You can try the following code snippet in the UserControl page to change one dropdown value based on the other.

ASCX:

<asp:DropDownList ID="ddlItemCode" runat="server" DataTextField="ItemCode" AutoPostBack="true" DataValueField="ItemCode" DataSourceID="dsItems" OnSelectedIndexChanged="ddlItemCode_SelectedIndexChanged">
</asp:DropDownList>
<asp:DropDownList ID="ddlItemDescr" runat="server" DataTextField="Description" DataValueField="Description" DataSourceID="dsItems">
</asp:DropDownList>

ASCX.CS:

protected void ddlItemCode_SelectedIndexChanged(object sender, EventArgs e)
{
  string selectedItem = ddlItemCode.SelectedValue;
  ddlItemDescr.SelectedIndex = ddlItemCode.SelectedIndex;
}

Thanks,
Princy

[Dimitrios]

Hello Princy,

Unfortunately, I have tried very hard to follow the asp.net way, but if I set the AutoPostBack to true for any dropdownlist control inside the EditForm, when the uses makes any selection, the DataBinding event of the EditForm is firing and sets the controls back to the initial (database) value. The selection is lost. I even tried to use a session variable to keep the selection and direct the list there after the event above, but somehow this did not work either.

So, I have to use Javascript.

Thanks for your time anyway...

[Angel Petrov]

Hello Dimitrios,

Since the drop downs are bound to the same data source you can try selecting the item in the second one by index as demonstrated below.

JavaScript:

function ddlcodeOnSelectedIndexChange(obj,name) {
                var index = $("#" + $(obj).attr("id")).prop("selectedIndex");
                $("#" + $(obj).attr("id").replace(name, 'ddlItemDescr')).prop('selectedIndex', index);
            }

Regards,
Angel Petrov
Telerik

 

 

[Dimitrios]

Good morning Angel (my morning anyway!!)

Again, thanks for your time.

The code you sent me does work!

However, since other people might have similar problems, let me add some notes of how the dropdown list in edit form can "behave" in a more logical way.

What I found is that:
dropdownlist.Items.FindByValue(editedItem.DataItem.somefield).Selected = True  -->  DOES NOT work, while:
dropdownlist.SelectedValue = editedItem.DataItem.somefield  -->  DOES work!

So, if some session variables keep the selected value of the dropdown list, when the DataBinding is firing and brings the database the initial data, the controls can be sent to show the selected value.

Again, thanks