Cascade Dropdowns in Grid

[Michael Lambert]

I've reviewed https://www.syncfusion.com/kb/5445/how-to-render-cascading-dropdown-while-editing, but still cannot figure it out.  I have 2 Dropdown (A & B) in a grid, where B list is dependent on the selection in A.  I can get the list of B fill upon the selection of an Item in A, the issues is when editing even though there is a value in B and the datasource in B is set properly set, the selectedvalue of B is always initially set to -1 rather than the value in the list.  So when I go into edit mode the Dropdown B is always blank enough it contain a valid value in the list.


What I am trying to achieve is that when I go to edit mode Dropdown B list is filled dependant on Dropdown A's value and the selectedItem is set the value of the underlying field(which will be in the list that was just populated).

HTML
    function complete(args) {
        if (args.requestType == "beginedit" || args.requestType == "add") {
            $("#OneCloudGridOCSite").ejDropDownList({ change: "OCSiteChange" });//bind the change event to dropdown

            if (args.requestType == "beginedit") {
                var cSite = $("#OneCloudGridOCSite").data("ejDropDownList")
                $.ajax({
                    url: '@Url.Action("GetSilos")',
                    type: 'GET',
                    data: { "site": cSite.selectedTextValue },
                    dataType: 'json',
                    success: function (data1) {
                        $("#OneCloudGridOCSilo").ejDropDownList({ dataSource: data1 });
                    },
                    error: function (exception) { alert('Exeption:' + exception); }
                })
 
                //$("#OneCloudGridOCSilo").ejDropDownList({ selectItemByValue: "US01" });  .....Tried this to force the selectedItem - Doesn't work             
               //  $("#OneCloudGridOCSilo").ejDropDownList("selectItemByIndex", 3);  ..Tried this and it does select the 3rd item in the list, but is not useful.
            }
        }
    }


    function OCSiteChange(e) {
        $.ajax({
            url: '@Url.Action("GetSilos")',
            type: 'GET',
            data: { "site": e.text },
            dataType: 'json',
            success: function (data1) {
                $("#OneCloudGridOCSilo").ejDropDownList({ dataSource: data1, selectedItemIndex: 0 });
            },
            error: function (exception) { alert('Exeption:' + exception); }
        })
    }


Column Defs
                col.Field(p => p.OCSite).HeaderText("Site").Width(100).EditType(EditingType.Dropdown).DataSource((IEnumerable<object>)ViewData["Sites"]).Add();              
                col.Field(p => p.OCSilo).HeaderText("Silo").Width(100).EditType(EditingType.Dropdown).Add();



        public ActionResult GetSilos(string site)
        {
            var silos = db.vOCPvDCs.Where(a => a.Site == site).OrderBy(a => a.Silo).Select(a => new { value = a.Silo, text = a.Silo }).Distinct().ToList();
            silos.Insert(0, new { value = "", text = "" });
            return Json(silos, JsonRequestBehavior.AllowGet);
        }

[Farveen Sulthana Thameeztheen Basha]

Hi Michael, 

Thanks for your interest in syncfusion support. 

We have created the sample according to your requirement which can be downloaded from the below location. 

https://www.syncfusion.com/downloads/support/forum/129239/ze/12.4_Sample813240959-632054341.zip 

In your code example, you have binded the dropdownList with text and value as Empty string. By default, the dropdownList updated with first value . When you give empty string it  get update the dropdownList with blank value. So this issue occurs. So that you have to bind the value for that text and value pair. Also you can get the dropDown value of the  B  based on “selectedItemIndex”  given on change event of dropdown. 

Please refer to the code example:- 

serverside 

public ActionResult DataSource(string titleValue) 

        { 

            var userTemplates = EmployeeRepository.GetAllRecords().Where(c => c.ContactTitle == titleValue).ToList(); 

            var data = new List<object>(); 

            foreach (var Cust in userTemplates) 

            { 

               data.Add(new { value = Cust.ShipCity, text = Cust.Country }); 

            } 

            

            return Json(data, JsonRequestBehavior.AllowGet); 

        } 

 

Clientside:- 

function ValChange(e) { 

        $.ajax({ 

            url: '/Home/DataSource', 

            type: 'GET', 

            data: { "titleValue": e.text },//pass the selectedValue of the dropdown to server side 

            success: function (data1) { 

               $("#GridShipCity").ejDropDownList({ dataSource: data1, selectedItemIndex: 0});//assign the filtered dataSource obtained from serverSide 

            } 

        })         

    } 

Regards, 

Farveen sulthana T 

[Michael Lambert]

Hi Farveen,
Still not working.  I tried the example and it works, though the example in made more complicated than I need with all the ForeignKey stuff and cannot figure why mine is not.

(I've attached the full code for the Views & Controller)

If I just set the Silo DDL (column in grid) initially to include all the choices:
--------Controller
            List<object> _silos = new List<object>(db.vOCPvDCs.Select(p => new { text = p.Silo, value = p.Silo }).Distinct().ToList());
            ViewBag.Silos = _silos;
  -------View
            col.Field(p => p.OCSilo).HeaderText("Silo").Width(100).EditType(EditingType.Dropdown).DataSource((IEnumerable<object>)ViewData["Silos"]).Add();
--------
Everything works.  The proper item in the dropdown is selected on edit.  Though I want to filter Silo choices base on the value of the Site DDL.

Upon editing this code run:

--------View
    function complete(args) {
        if (args.requestType == "beginedit" || args.requestType == "add") {
            $("#OneCloudGridOCSite").ejDropDownList({ change: "OCSiteChange" });//bind the change event to dropdown
            if (args.requestType == "beginedit") {
                var cSite = $("#OneCloudGridOCSite").data("ejDropDownList");
                $.ajax({
                    url: '@Url.Action("GetSilos")',
                    type: 'GET',
                    data: { "site": cSite.selectedTextValue },
                    success: function (data1) { $("#OneCloudGridOCSilo").ejDropDownList({ dataSource: data1}); },
                    error: function (exception) { alert('Exeption:' + exception); }
                })
            }
        }
    }
..... Abbreviated Grid Def
.....    @(Html.EJ().Grid<Request>("OneCloudGrid")
.....        col.Field(p => p.OCSite).HeaderText("Site").Width(100).EditType(EditingType.Dropdown).DataSource((IEnumerable<object>)ViewData["Sites"]).Add();
.....        col.Field(p => p.OCSilo).HeaderText("Silo").Width(100).EditType(EditingType.Dropdown).DataSource((IEnumerable<object>)ViewData["Silos"]).Add();

--------Controller
        public ActionResult GetSilos(string site)
        {
            List<object> silos = new List<object>(db.vOCPvDCs.Where(a => a.Site == site).OrderBy(a => a.Silo).Select(a => new { value = a.Silo, text = a.Silo }).Distinct().ToList());
            return Json(silos, JsonRequestBehavior.AllowGet);
        }

The is issue is, now the DDL for Silo is blank (the textbox portion of the control), though the DDL list contains all the proper choices, including what should the the selected value/text, when expanded.  For some reason when I change the datasource in the ajax call, the DDL doesn't select the current value even though it is in the list.

I also have the same issue with the Site changed function:
    function OCSiteChange(e) {
        $.ajax({
            url: '@Url.Action("GetSilos")',
            type: 'GET',
            data: { "site": e.text },
            dataType: 'json',
            success: function (data1) {
                $("#OneCloudGridOCSilo").ejDropDownList({ dataSource: data1, selectedItemIndex: 0 });
            },
            error: function (exception) { alert('Exeption:' + exception); }
        })
    }
Thanks,

Attachment: TestBed_6926e53b.zip

[Mani Sankar Durai]

Hi Michael, 

We have checked your provided view and controller page and based on that we have prepared a sample that can be downloaded from the below link. 

Link: https://www.syncfusion.com/downloads/support/forum/129239/ze/12.4_Sample-243337363 

In this sample we have rendered the grid based on your code example and performed cascading dropdown, but we unable to reproduce the reported issue. 

If you get the value in the dropdown but not selected the value from the dropdown list refer the below code to select the data from the dropdown. 

Refer the below code example how we get the data for the dropdown 

script type="text/javascript">     

      //change event of the Designation dropdown. 

    function ValChange(e) { 

        $.ajax({ 

            url: '/Home/DataSource', 

            type: 'GET', 

            data: { "titleValue": e.text },//pass the selectedValue of the dropdown to server side 

            success: function (data1) { 

                var ddl = $("#GridShipCity").ejDropDownList("instance"); 

                $("#GridShipCity").ejDropDownList({ dataSource: data1 }); 

                ddl.selectItemByText(data1[0].text); // assign the value for dropdown using selectItemByText 

            } 

        })         

    } 

} 

Refer the documentation link. 

Link: https://help.syncfusion.com/api/js/ejdropdownlist#methods:selectitembytext 

If you still face the issue please get back to us with the following details. 

1.       Share the screenshot/ video of the issue 

2.       If possible please reproduce the issue in the above attached sample. 

The provided information will help us to analyze the issue and provide you the response as early as possible. 

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai.