Case Cade drop down

[sateesh kumar]

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]

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: 

http://www.syncfusion.com/downloads/support/forum/143168/ze/DDL_Cascading-12620548  

 

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]

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]

My both test cases also working with same code. 

[Prince Oliver]

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