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
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
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
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
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
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
None
0 Points
3 Posts
CascadingDropDown + chosen (or select2)
Mar 30, 2020 03:06 PM|marco-netsurfers|LINK
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>Contributor
3370 Points
1409 Posts
Re: CascadingDropDown + chosen (or select2)
Mar 31, 2020 05:49 AM|samwu|LINK
Hi marco-netsurfers,
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
None
0 Points
3 Posts
Re: CascadingDropDown + chosen (or select2)
Mar 31, 2020 08:20 AM|marco-netsurfers|LINK
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
Contributor
3370 Points
1409 Posts
Re: CascadingDropDown + chosen (or select2)
Apr 01, 2020 05:18 AM|samwu|LINK
Hi marco,
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
None
0 Points
3 Posts
Re: CascadingDropDown + chosen (or select2)
Apr 02, 2020 03:22 PM|marco-netsurfers|LINK
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