Cascading Drop Down List in Grid

[Chris]

Hi,

I followed this https://www.syncfusion.com/kb/5445/how-to-render-cascading-dropdown-while-editing knowledge base article to make a cascading drop down list in an (external form) grid.  I eventually got it working but I had to make some changes in order to get it to work.  I thought I would share what I did in case you wanted to update the KB article to save the next person some time.

The main problem I had was during editing.  It was changing the datasource of the child ddl correctly, but it was losing the previously saved value for it.  (the child ddl would come up blank)

In the controller:

        public ActionResult DataSource(string parentId)
        {
            var childList = _context.ChildTable.Where(w => w.ParentId == Convert.ToInt32(parentId));

            var Data = new List<object>();

            foreach (ChildTable childData in childList)
            {
                Data.Add(new { value = childData.Id, text = childData.ChildName });
            }           

            return Json(Data); // JsonRequestBehavior is not part of ASP.Net Core.  However, returning Json(Data) works.
            //return Json(Data, JsonRequestBehavior.AllowGet);
        }

The javascript:

<script type="text/javascript">   
    function Complete(args) {
        if (args.requestType == "beginedit" || args.requestType == "add") {
            $("#GridParentId").ejDropDownList({ change: "ValChange" });//bind the change event to dropdown
            if (args.requestType == "beginedit") {
                var parentObj = $("#GridParentId").data("ejDropDownList");//get the edited dropdown object

               // get the child ddl and get it's value
              var childObj = $("#GridChildId").data("ejDropDownList");
              var childId = childObj[0]["value"];

                $.ajax({
                    url: 'Home/DataSource',
                    type: 'GET',
                    data: { "parentId": parentObj[0]["value"] },//passed the selectedValue of the dropdown to server side
                    success: function (data1) {
                       var ddl = $("#GridChildId").ejDropDownList("instance");
                        $("#GridChildId").ejDropDownList({ dataSource: data1 });//assign the filtered dataSource obtained from serverSide
                       // set the the value of the child ddl back to what it was before as changing the datasource causing it to loose its previously saved value
                       ddl.selectItemByValue(childId);
                    }
                })
            }
        }
    }

   function ValChange(e) {
            $.ajax({
                url: "Home/DataSource",
                type: "GET",
                data: { "parentId": e.value },
                success: function (data1) {
                    $("#GridChildId").ejDropDownList({ dataSource: data1, selectedItemIndex: 0 });
                }
            });
   }
</script>

[Manivannan Padmanaban]

Hi chris, 

Thanks for contacting syncfusion support. 

We have consider your valuable suggestion and we would like to implement it in our knowledge base documentation and it will refreshed in the online as soon as possible. 

Until then, we appreciate your patience. 

Regards,