CODEWITHSUNDEEP
c#jqueryasp.netupdatepanelhtml-select
Eric R.
Eric R.

Reputation: 1125

Repopulate Asp.Net DropDownList In UpdatePanel

I am having some troubles with repopulating a dropdownlist inside an updatepanel. On page load, I load the drop down list:

            this.dropdownFacility.Items.Clear();
            this.dropdownFacility.DataSource = table;
            this.dropdownFacility.DataTextField = "FacilityName";
            this.dropdownFacility.DataValueField = "FacilityID";
            this.dropdownFacility.DataBind();

The variable 'table' is a DataTable that I populate from a SQL Database. This works and shows all my values after the page loads the first time. Then, inside of my page, I have a JQuery Dialog that displays:

        <div id="assignmentDialog" title="Process Assignment">
            <div style="margin:10px; font-size:16px; ">
                <asp:Label runat="server" Text="Select A Facility:*" Font-Bold="true" style="width:140px; display:inline-block; vertical-align:text-top; text-align:right;" />
                <asp:DropDownList runat="server" ID="dropdownFacility" />
                <asp:LinkButton runat="server" ID="linkNewFacility" Text="New" ForeColor="Blue" OnClientClick="OpenFacilityDialog();" />
            </div>
        </div>

Upon clicking on the link button, another JQuery dialog displays allowing the user to enter data for a facility. When they are done, they can click a button to submit the data:

<asp:Button runat="server" ID="NewFacility" Text="Submit" OnClick="NewFacility_Clicked" OnClientClick="return CheckFacilityData();" style="display: block; text-align:center; margin: 0 auto;" />

Here is where the issue occurs. After the button is clicked, I can see the record has been inserted into the table. Also, with break points in my code during page load, I can see that after I rebind the drop down, that the number of items have increased by 1, showing that the new record is there. However, on the actual page, that new record is not displayed in the drop down. Below is how I define my update panel with the triggers:

<asp:UpdatePanel runat="server" ID="assignmentUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="true">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="NewFacility" EventName="Click" />
    </Triggers>
...

Can anyone see what I am doing wrong?

Upvotes: 0

Views: 1679

Answers (2)

Eric R.
Eric R.

Reputation: 1125

Well, I figured out the issue. Issue was actually due to the fact that I am using a JQuery Dialog with the ASP.NET UpdatePanel. The JQuery logic actually creates a new div for the dialog and places it outside of the form element. To fix this, I basically did 2 things. The first was to append the dialog back to the form by doing this:

$("#assignmentDialog").dialog(
{
    modal: true,
    hide: "explode",
    width: 450,
    autoOpen: false,
    resizable: false,
    open: function (event, ui)
    {
        $(this).parent().appendTo("form");
    },
    close: function (event, ui)
    {
        // Clear the inputs
        $("#textboxStartDate").val("");
        $("#textboxEndDate").val("");
        $("#dropdownFacility").val("");
    }
});

Then, I had to move my update panel inside of the dialog by doing this:

    <div id="assignmentDialog" title="Process Assignment">
        <asp:UpdatePanel runat="server" ID="assignmentUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="true">

Upvotes: 0

user1789769
user1789769

Reputation:

Try like this:

<asp:DropDownList runat="server" ID="dropdownFacility" 
                 AppendDataBoundItems="True" AutoPostBack="True" />

or:

this.dropdownFacility.Items.Clear();
this.dropdownFacility.DataSource = table;
this.dropdownFacility.DataTextField = "FacilityName";
this.dropdownFacility.DataValueField = "FacilityID";
this.dropdownFacility.AppendDataBoundItems = true;
this.dropdownFacility.AutoPostBack = true;
this.dropdownFacility.DataBind();

Upvotes: 1

Related Questions