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. Image for the cookie policy date

Case Cade drop down

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


4 Replies

PO Prince Oliver Syncfusion Team March 6, 2019 11:21 PM

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 



SK sateesh kumar March 7, 2019 12:36 AM

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




SK sateesh kumar March 7, 2019 01:31 AM

My both test cases also working with same code. 



PO Prince Oliver Syncfusion Team March 7, 2019 01:39 AM

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 


Loader.
Live Chat Icon For mobile
Up arrow icon