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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Cascade Dropdowns in Grid

Thread ID:

Created:

Updated:

Platform:

Replies:

129239 Mar 6,2017 10:31 PM UTC Mar 17,2017 12:23 PM UTC ASP.NET MVC 3
loading
Tags: Grid
Michael Lambert
Asked On March 6, 2017 10:31 PM UTC

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 [Syncfusion]
Replied On March 7, 2017 01:31 PM UTC

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. 




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
Replied On March 16, 2017 08:40 PM UTC

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 [Syncfusion]
Replied On March 17, 2017 12:23 PM UTC

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. 
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. 

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. 


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.

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

;