1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. Cascade dropdown on Add and Edit records

Cascade dropdown on Add and Edit records

Hi, I am using the Grid control with JS2, my problem is... 

I have enabled the AllowEditing and the mode prefered is "Dialog", I need to create a cascade population from one dropdown list to a second (I am planning doing this with some Ajax -I don't know how already-) but I am stuck on the first part that is detect the "change" event of the first dropdown list. 

I need some event to detect when the user select (or change) one element from the first dropdown and then get the value and populate the second dropdown element. 

I notice that the jquery change evento doesnt work.

Thanks in advance

2 Replies
BR Benjamín Rivero Cruz June 19, 2018 04:56 PM UTC

Find the answer with some responses of another forums... one way of doing it is like this

$("#GridEmpresaId_hidden").on("DOMSubtreeModified", function (e) {

                    var selectedText = $("#GridEmpresaId_hidden").find("option:selected").text();
                    var selectedValue = $("#GridEmpresaId_hidden").val();
                    console.log("Selected Text: " + selectedText + " Value: " + selectedValue);

                });

Attaching the event DomSubtreeModified to the select element



MF Mohammed Farook J Syncfusion Team June 20, 2018 11:00 AM UTC

Hi Benjamin, 
 
Thanks for contacting Syncfusion support. 
 
You can achieve the Cascading DropDownList with grid Editing by using the Cell Edit Template feature. We have prepared a simple sample based on your query in which Cascading DropDownList is rendered for the ShipCountry and ShipState column using edit property of Grid columns. Please refer to the below code example, Documentation link and sample link. 
 
[index.chtml] 
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 
    { 
        .  .  . 
        col.Field("ShipCountry").HeaderText("ShipCountry").Width("150").Add(); 
        col.Field("ShipCity").HeaderText("ShipCity").Width("150").Add(); 
 
    }).Height("400").Created("created").AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()  
 
<script> 
   .   .   . 
    function created(args) { 
        this.getColumns()[2].edit = { 
            create: function () { 
                countryElem = document.createElement('input'); 
                return countryElem; 
            }, 
            read: function () { 
                return countryObj.text; 
            }, 
            destroy: function () { 
                countryObj.destroy(); 
            }, 
            write: function () { 
                countryObj = new ej.dropdowns.DropDownList({ 
                     .   .   . 
                }); 
                countryObj.appendTo(countryElem); 
            } 
        }; 
        this.getColumns()[3].edit = { 
            create: function () { 
                stateElem = document.createElement('input'); 
                return stateElem; 
            }, 
            read: function () { 
                return stateObj.text; 
            }, 
            destroy: function () { 
                stateObj.destroy(); 
            }, 
            write: function () { 
                stateObj = new ej.dropdowns.DropDownList({ 
                     .   .   . 
               }); 
                stateObj.appendTo(stateElem); 
            } 
        } 
    } 
         
</script> 
 
 
 
Regards, 
J Mohammed Farook 
 


Loader.
Up arrow icon