locked
CascadingDropDown + chosen (or select2) RRS feed

  • Question

  • User1973386088 posted

    Good afternoon from quarantine (I'm in Italy)

    I've to modify an old project that include some cascadingdropdown. My client want to use a textbox for better choose items.

    There are two jquery option chosen and select2.

    But my problem is that twice don't update the child dropdown, they update the original (hidden) dropdown and change event are risen but the child won't charge data (imagine a country, state scenario).

    Looks like that there is a different behaviour between manualy change the dropdown and progammatically. 
    I'm wondering if there is a method to force the update of the child dropdown.

    This is my code:
    PS: the two drop are inside a FormView and are binding previous choice.
    PS2: I use setTimeout before set chosen to wait for completely fill of the first dop

    Thank you 
    Marco

        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Release" AsyncPostBackTimeout="2000" />
            <div>
                        <asp:DropDownList runat="server" ID="regione" CssClass="drop chosen"  />
                        <ajaxToolkit:CascadingDropDown ID="ajaxRegione" BehaviorID="myCDERegione" runat="server" TargetControlID="regione" Category="regione" PromptText="Scegliere...." LoadingText="Loading..." ServicePath="~/service/fillDll.asmx" ServiceMethod="GetRegione" SelectedValue='<%#Bind("ID_regione")%>' />
                <br />
                <br />
                        <asp:DropDownList runat="server" ID="citta" CssClass="drop" />
                        <ajaxToolkit:CascadingDropDown ID="ajaxCitta" BehaviorID="myCDECitta" runat="server" TargetControlID="citta" Category="citta" ParentControlID="regione" PromptText="Scegliere...." LoadingText="Loading..." ServicePath="~/service/fillDll.asmx" ServiceMethod="GetCitta" SelectedValue='<%#Bind("ID_citta")%>' />
    
            </div>
        </form>
        <script type="text/javascript">
    
            setTimeout(function(){ $('.chosen').chosen(); }, 1000);
            $('<%="#"+ regione.ClientID %>').on('change', function (e) {
               alert(e);
            })
    
            
        </script>

    Monday, March 30, 2020 3:06 PM

Answers

  • User1973386088 posted

    Hi samwu,

    My needs was quite different, I don't need to upgrade the database with new data. The need is to change the second dropdown filtered by the choice of the first without postback.

    But your suggest inspired me, now i'll try to simulate the behaviour of cascadingdropdown with ajax request

    Thank you for your help

    Marco

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 2, 2020 3:22 PM

All replies

  • User288213138 posted

    Hi marco-netsurfers,

    marco-netsurfers

    But my problem is that twice don't update the child dropdown, they update the original (hidden) dropdown and change event are risen but the child won't charge data (imagine a country, state scenario).

    Looks like that there is a different behaviour between manualy change the dropdown and progammatically. 
    I'm wondering if there is a method to force the update of the child dropdown.

    According to your description, I couldn’t understand your requirement clearly.

    Do you want to update the data in the CascadingDropDown drop-down list?

    If this is your requirement, You can change the data source instead of modifying them through jquery.

    If I misunderstand your requirement, please post more details information about your requirement.

    Best regards,

    Sam

    Tuesday, March 31, 2020 5:49 AM
  • User1973386088 posted

    Do you want to update the data in the CascadingDropDown drop-down list?

    Yes you understand clearly, I need to update the data in the second dropdown on changing the first

    What do you mean with "change the data source".

    The 2 drop are inside a FormView and bind choise from db. The project is an old project change structure is tricky.

    Trhank you

    Tuesday, March 31, 2020 8:20 AM
  • User288213138 posted

    Hi marco,

    I need to update the data in the second dropdown on changing the first

    You can use the change () method in jquery, which uses ajax to modify the data source.

    Here a demo for you as a reference.

    aspx:
    <script type="text/javascript">
            $(document).ready(function () {
                $('#<%=FormView1.FindControl("ddlCountries").ClientID %>').change(function () {
                    $.ajax({
                        type: 'POST',
                        contentType: "application/json; charset=utf-8",
                        url: 'WebForm9.aspx/Change_Data',
                        success: function () {
                            location.reload(true);
                        },
                        error: function () {
                            alert("Error");
                        }
                    });
                }); 
            });
    
        </script>
    
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    
                <asp:FormView ID="FormView1" runat="server">
                    <ItemTemplate>
                        <asp:DropDownList ID="ddlCountries" runat="server" Width="150">
                        </asp:DropDownList>
                        <ajaxToolkit:CascadingDropDown ID="cdlCountries" TargetControlID="ddlCountries" PromptText="Select Country" PromptValue=""
                            ServiceMethod="GetCountries" ServicePath="WebService1.asmx"
                            runat="server" Category="Country" />
    
    
                        <asp:DropDownList ID="ddlCities" runat="server" Width="150">
                        </asp:DropDownList>
                        <ajaxToolkit:CascadingDropDown ID="cdlCities" TargetControlID="ddlCities" PromptText="Select City" PromptValue=""
                            ServiceMethod="GetCities" ServicePath="WebService1.asmx"
                            runat="server" Category="City" />
                    </ItemTemplate>
                </asp:FormView>
    
    
    aspx.cs:
     protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    DataTable dt = new DataTable();
                    dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Age") });
                    dt.Rows.Add(1, "name1", "age1");
                    
                    FormView1.DataSource = dt;
                    FormView1.DataBind();
                }
            }
    
            
            [WebMethod]
            public static void Change_Data()
            {
                string query = "UPDATE City SET CityName = 'Samwu' WHERE CityId = 2; ";
                string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
                using (SqlConnection con = new SqlConnection(constr))
                {
                    using (SqlCommand cmd = new SqlCommand(query))
                    {
                        cmd.CommandType = CommandType.Text;
                        cmd.Connection = con;
                        con.Open();
               
                        cmd.ExecuteNonQuery();
                        con.Close();
                    }
                }
    
            }
    
    WebService1.asmx:
     [WebMethod]
            public CascadingDropDownNameValue[] GetCountries(string knownCategoryValues)
            {
                string query = "SELECT * FROM Countries";
                List<CascadingDropDownNameValue> countries = GetData(query);
                return countries.ToArray();
            }
    
            [WebMethod]
            public CascadingDropDownNameValue[] GetCities(string knownCategoryValues)
            {
                string query = "SELECT * FROM City";
                List<CascadingDropDownNameValue> countries = GetData(query);
                return countries.ToArray();
            }    
            private List<CascadingDropDownNameValue> GetData(string query)
            {
                string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
                SqlCommand cmd = new SqlCommand(query);
                List<CascadingDropDownNameValue> values = new List<CascadingDropDownNameValue>();
                using (SqlConnection con = new SqlConnection(conString))
                {
                    con.Open();
                    cmd.Connection = con;
                    using (SqlDataReader reader = cmd.ExecuteReader())
                    {
                        while (reader.Read())
                        {
                            values.Add(new CascadingDropDownNameValue
                            {
                                name = reader[1].ToString(),
                                value = reader[0].ToString()
                            });
                        }
                        reader.Close();
                        con.Close();
                        return values;
                    }
                }
            }
    

    Best regards,

    Sam

    Wednesday, April 1, 2020 5:18 AM
  • User1973386088 posted

    Hi samwu,

    My needs was quite different, I don't need to upgrade the database with new data. The need is to change the second dropdown filtered by the choice of the first without postback.

    But your suggest inspired me, now i'll try to simulate the behaviour of cascadingdropdown with ajax request

    Thank you for your help

    Marco

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 2, 2020 3:22 PM