We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Case Cade drop down

Thread ID:

Created:

Updated:

Platform:

Replies:

143168 Mar 7,2019 05:20 AM UTC Mar 7,2019 09:39 AM UTC jQuery 4
loading
Tags: ejDropDownList
sateesh kumar
Asked On March 7, 2019 05:20 AM UTC

Hi team,

Am assigning data source to Parent/child drop down in java script.
am not able to do the cascade operation. my child drop down was going disable state. 
when i remove CasCasde (having color in below) property form definition,it not disable mode.


Sample Data  for parent - Id is Unique

ID Name
1 A
2 B
3 C

Sample data for Child - Parent id is Unique

Id ParentId Name
1 1 Test1
2 2 Test2
3 6 Test3
4 7 Test4


@Html.EJ().DropDownList("parent").Datasource(Model.Parents).CssClass("flat-saffron").DropDownListFields(df => df.ID("Id").Text("Name").Value("Id")).WatermarkText("Select Parent").Width("100%").CascadeTo("child").ClientSideEvents(e => e.Change("parenthange"))

@Html.EJ().DropDownList("child").Datasource(Model.JobImpostions).CssClass("flat-saffron").DropDownListFields(df => df.ID("ParentID").Text("Name").Value("ParentID")).WatermarkText("Select Child").Width("100%").

java script

 promise.done(function (e) {

                var childResult= $("#child").data("ejDropDownList");
                childResult.option("dataSource", e.result.Child);
            
            var parentResult= $("#parent").data("ejDropDownList");
                parentResult.option("dataSource", e.result.Parents);
                parentResult.selectItemsByIndices("0");
});

 function parenthange(args) {

      //  debugger;
        var result= $('#impostions').data("ejDropDownList");
        result.element.val(args.selectedValue);
    }

thanks for advance


Prince Oliver [Syncfusion]
Replied On March 7, 2019 07:21 AM UTC

Hi Sai,  
 
Thank you for contacting Syncfusion support.  
 
By default , cascading DropDownList will work fine using cascadeTo property with proper mapping of fields and you need not assign any dataSource manually. We checked your code and it seems you have not mapped “parentId” as value of first DropDownList. Please modify this in your end since child DropDownList will be filtered based on the value of parentDropDownList.  Also, DropDownList will not be disabled by default. Please ensure whether you are using enabled property anywhere in the page. We have prepared a sample similar to your scenario such that child DropDownList will be disabled during initial rendering with “Enabled” property set to false,  and upon change in first DropDownList the child DropDownList will be enabled. Kindly refer to the following code snippet 
 
[View] 
<div class="frame"> 
    <div class="row"> 
        <div class="col-xs-8 col-sm-4"> 
            <span class="txt">Select Group</span> 
            @Html.EJ().DropDownList("parent").Datasource((IEnumerable<Parents>)ViewBag.datasource).CssClass("flat-saffron").DropDownListFields(df => df.ID("ID").Text("Name").Value("ParentId")).WatermarkText("Select Parent").Width("100%").CascadeTo("child") 
        </div> 
        <div class="col-xs-8 col-sm-4"> 
            <span class="txt">Select Country</span> 
            @Html.EJ().DropDownList("child").Datasource((IEnumerable<JobImpositions>)ViewBag.datasource1).CssClass("flat-saffron").DropDownListFields(df => df.ID("ParentId").Text("Name").Value("ParentId")).WatermarkText("Select Child").Width("100%").Enabled(false) 
        </div> 
    </div> 
</div> 
 
[Controller] 
  public partial class DropdownlistController : Controller 
    { 
        List<Parents> parent = new List<Parents>(); 
        List<JobImpositions> test = new List<JobImpositions>(); 
        public ActionResult DropdownlistFeatures() 
        { 
            parent.Add(new Parents { ParentId = "1", Name = "A" }); 
            parent.Add(new Parents { ParentId = "2", Name = "B" }); 
            parent.Add(new Parents { ParentId = "3", Name = "c" }); 
            ViewBag.datasource = parent; 
            test.Add(new JobImpositions { Name = "Text1", ID = "1", ParentId = "1" }); 
            test.Add(new JobImpositions { Name = "Text2", ID = "2", ParentId = "1" }); 
            test.Add(new JobImpositions { Name = "Text3", ID = "3", ParentId = "2" }); 
            test.Add(new JobImpositions { Name = "Text4", ID = "4", ParentId = "3" }); 
            ViewBag.datasource1 = test; 
            return View(); 
        } 
    } 
    public class Parents 
    { 
        public string ParentId { get; set; } 
        public string Name { get; set; } 
    } 
    public class JobImpositions 
    { 
        public string Name { get; set; } 
        public string ID { get; set; } 
        public string ParentId { get; set; } 
    } 
 
We have attached a sample for your reference, please find the sample at the following location: 
 
Kindly refer to the following UG link for further reference: https://help.syncfusion.com/aspnetmvc/dropdownlist/functionalities#cascading  
 
Please let us know if you need any further assistance on this. 
 
Regards, 
Prince 


sateesh kumar
Replied On March 7, 2019 08:36 AM UTC

Hi Prince,

its working now,after update my java script. my java script issue is " result.element.val(args.selectedValue);" 
Initially my two drop downs does not any source. am assigning data source based on other event of drop down.
am successfully assigning data source to the two dropdowns. 
Now i want clear the child drop down value, before updating with new id.

its working fine with +ve casese. when -ve cases its not working. 
Case 1: have parent and child -- success

Case2 : 
          Step1: Select parent, which having child
          Step2: now aging select other parent, that parent does not have any child.


Parent Child
Id Name EmpId Department
1 Test 1 Accounts
2 Test2 2 Sales
3 Test3 5 Operations


@Html.EJ().DropDownList("parent").Datasource(Model.Employee).CssClass("flat-saffron").DropDownListFields(df => df.ID("Id").Text("Name").Value("Id")).WatermarkText("Select Parent").Width("100%").ClientSideEvents(e => e.Change("empchange"))

@Html.EJ().DropDownList("child").Datasource(Model.Department).CssClass("flat-saffron").DropDownListFields(df => df.ID("EmpId").Text("Department").Value("EmpId")).WatermarkText("Select Child").Width("100%").

java script

 promise.done(function (e) {

                var childResult= $("#child").data("ejDropDownList");
                childResult.option("dataSource", e.result.Child);
            
            var parentResult= $("#parent").data("ejDropDownList");
                parentResult.option("dataSource", e.result.Parents);
                parentResult.selectItemsByIndices("0");
});

 function empchange(args) {

      //  debugger;
        var result= $('#child').data("ejDropDownList");       
result.selectItemByValue(args.selectedValue) ;  --its working now

    } 

Thanks for the advance



sateesh kumar
Replied On March 7, 2019 09:31 AM UTC

My both test cases also working with same code. 


Prince Oliver [Syncfusion]
Replied On March 7, 2019 09:39 AM UTC

Hi Sai,   

Thank you for your update. We are glad that the issue is resolved in your end. Please let us know if you need any further assistance on this. 

Regards, 
Prince 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon