Hi Abhijeet,
Thanks for your update.
As per your requirement we can achieve it by applying “Cascading” support to our Dropdownlist controls or by changing the DataSource of the other Dropdown list by using “OnValueSelect” server side event of our Dropdownlist control.
Applying Cascading support:
We are having an API called “CascadeTo” which is used to map the child Dropdown list in the parent Dropdown list control. By selecting an option in the parent dropdown, the child DropDownList has to load the corresponding value regarding the parent Dropdown. Cascading will be done based on parent id which we are mapping from one Dropdownlist to the other Dropdownlist control. We can also map any field of Dropdownlist control for Cascading support. Here we have mapped “Value” field to perform cascading. We have to bind CascadeTo API in the builder as shown in the following code snippet.
<code>
<p>Binded DataSource using Cascading support</p>
<div class="control">
<span class="txt">Select Group</span>
<ej:DropDownList ID="groupsList" runat="server" DataValueField="key" CascadeTo="MainContent_countryList"></ej:DropDownList>
</div>
<div class="control">
<span class="txt">Select Country</span>
<ej:DropDownList ID="countryList" runat="server" DataValueField="key" CascadeTo="MainContent_subList" Enabled="false"></ej:DropDownList>
</div>
<div class="control">
<span class="txt">Select Capital</span>
<ej:DropDownList ID="subList" runat="server" Enabled="false"></ej:DropDownList>
</div>
</code>
We have give the “ID” of the Dropdownlist control in which it has to be cascaded.
Using OnValueSelect event:
While binding DataSource on “OnValueSelect” server side event we have to bind OnValueSelect event in the builder as shown in the following code snippet.
<code>
<p>Binded DataSource using OnValueSelect</p>
<div class="control">
<span class="txt">DropDown 1</span>
<ej:DropDownList ID="DropDownList1" runat="server" OnValueSelect="DropDownList1_ValueSelect"></ej:DropDownList>
</div>
<div class="control">
<span class="txt">DropDown 2</span>
<ej:DropDownList ID="DropDownList2" DataTextField="Text" DataIdField="ID" OnValueSelect="DropDownList2_ValueSelect" runat="server"></ej:DropDownList>
</div>
<div class="control">
<span class="txt">DropDown 3</span>
<ej:DropDownList ID="DropDownList3" DataTextField="Text" DataIdField="ID" runat="server"></ej:DropDownList>
</div>
</code>
Then we have to bind the DataSource to the other Dropdownlist control as shown in the following code snippet.
<code>
protected void DropDownList1_ValueSelect(object sender, DropdownListEventArgs e)
{
this.DropDownList2.DataSource = new DropDownDataSource().GetTreeIconItems().ToList();
}
protected void DropDownList2_ValueSelect(object sender, DropdownListEventArgs e)
{
this.DropDownList3.DataSource = new DropDownDataSource1().GetTreeIconItems().ToList();
}
</code>
Here on the value selected from first Dropdownlist control DataSource will be bound to the second Dropdownlist control. Then if you select any value from the second Dropdownlist control then the DataSource will be bound to the third Dropdownlist control. For your convenience we have prepared sample by showcasing both the scenario and the same can be downloaded from the following location. http://www.syncfusion.com/downloads/support/directtrac/141807/ze/DDL_Cascading_Web(1)1987184457
Kindly check with the above sample. If still you face the problem then please share us your requirement details along with the replication procedure. This will be helpful for us to serve you better.
Please let us know if you have any other queries.
Regards,
Saranya.S
Hi Abhijeet,
Thanks for your update.
As per your request we have prepared the sample with Dropdownlist control with the DataSet binded and the sample can be downloaded from the following location.
http://www.syncfusion.com/downloads/support/forum/119806/ze/DropDown-467850071
In the above sample we have binded the DataSet as a DataSource for the Dropdownlist control in the code behind as shown in the following code snippet.
<code>
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["SQLConnectionString"].ConnectionString);
protected void Page_Load(object sender, EventArgs e)
{
SqlCommand cmd = new SqlCommand("Select * from Employees", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
this.employeeList.DataSource = ds.Tables[0];
this.employeeList.DataBind();
con.Close();
}
</code>
Kindly check with the above sample and let us know if you have any other queries.
Regards,
Saranya.S
{
if(!ispostback)
{
SqlCommand cmd = new SqlCommand("Select * from Employees", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
this.employeeList.DataSource = ds.Tables[0];
this.employeeList.DataBind();
con.Close();
}
}
Hi Abhijeet,
We were able to reproduce the problem (Datasource gets emptied on postback in page load) and we have logged a report regarding this. A support incident to track the status of this defect has been created under your account. Please log on to our support website to check for further updates.
https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents
Please let me know if you have any questions.
Regards,
Saranya.S
Hi Gaurang,
Thanks for contacting syncfusion support.
Query:” I am facing the same problem as Abhijit and this problems persists for all the controls which we bind using DataSource. Every control needs to be populated on every Postback. Is there any progress on this thread? Have you found any solution to this?”
The reported issue have been fixed and available in our latest release volume 4, 2016.
Please contact us in future if you have any queries,
Regards,
Arun P
Hi Ishara,We are glad to announce that reported issue has been fixed and please find our latest Essential Studio 2016 Volume 3 Release v14.3.0.49 which can be downloaded under the following link:We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistanceRegards,Dhivyalakshmi.